• Ajax在jQuery中的应用---ajax()方法


    在jQuery中,$.ajax()方法是最底层的方法,也是功能最强的方法。其调用的语法格式为:

    $.ajax([options])

    其中,可选项参数[options]为$.ajax()方法中的请求设置,其格式为key/value,既包含发送请求的参数,也含有服务器相应后回调的数据,其全部名称如下表所示。

    参数名 类型 描述
    url String       发送请求的地址(默认为当前页面)
    type String       数据请求方式(post或get),默认为get
    data String或Object       发送到服务器的数据。如果不是字符串则自动转成字符串格式,如果是get请求方式,那么,该字符串将附在url的后面
    dataType String       服务器返回的数据类型,如果没有指定,jQuery将自动根据HTTP包MIME信息自动判断,服务器返回的数据根据自动判断的结果进行解析,传递给回调函数,其可用类型为:
    html:返回纯文本的HTML信息,包含的Script标记会在插入页面时被执行
    script:返回纯文本JavaScript代码
    text:返回纯文本字符串
    xml:返回可被jQuery处理的XML文档
    json:返回JSON格式的数据
    beforeSend Function       该函数用于发送请求前修改XMLHttpRequest对象,其中的参数就是XMLHttpRequest对象,由于该函数本身是jQuery事件,因此如果函数返回false,则表示取消本次事件
    complete Function       请求完成后调用的回调函数,该函数无论数据发送成功或失败都会调用,其中有两个参数,一个是XMLHttpRequest对象,另外一个是strStatus,用于描述成功请求类型的字符串
    success Function       请求成功后调用的回调函数,该函数有两个参数,一个是根据参数dataType处理后服务器返回的数据data,另外一个是strStatus,用于描述状态的字符串
    error Function       请求失败后调用的回调函数,该函数有三个参数,第一个是XMLHttpRequest对象,第二个是出错信息strError,第三个是捕捉到的错误对象strObject
    timeout Number 请求超时的时间(毫秒),该设置将覆盖$.ajaxSetup()方法中的同样设置
    global Boolean       是否相应全局事件,默认是true,表示相应,如果设置成false,表示不响应,那个全局事件$.ajaxStart等将不响应
    async Boolean       是否为异步请求,默认是true,表示异步,如果设置成false,表示同步请求
    cache Boolean       是否进行页面缓存,true表示进行缓存,false表示不进行页面缓存

     

    下面通过一个简单示例介绍jQuery中$.ajax()方法在数据交互过程中的应用。

    1.创建一个用于登录的界面login.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>$.ajax()方法发送请求</title>
        <script type="text/javascript" src="jquery-1.9.0.js">
        </script>
        <style type="text/css">
               body{font-size:13px}
               .divFrame{225px;border:solid 1px #666}
               .divFrame .divTitle{padding:5px;background-color:#eee;height:23px}
               .divFrame .divTitle span{float:left;padding:2px;padding-top:5px;}
               .divFrame .divContent{padding:8px;text-align:center}
               .divFrame .divContent .clsShow{font-size:14px;line-height:2.0em}
               .divFrame .divContent .clsShow .clsError{font-size:13px;border:solid 1px #cc3300;padding:2px;display:none;margin-bottom:5px;background-                                                    color:#ffe0a3}
               .txt{border:#666 1px solid;padding:2px;150px;margin-right:3px}
               .btn {border:#666 1px solid;padding:2px;50px;
               filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
        </style>
        <script type="text/javascript">
            $(function() {
                $("#btnLogin").click(function() {
                    var strTxtName = encodeURI($("#txtName").val());
                    var strTxtPass = encodeURI($("#txtPass").val());
                    $.ajax({
                        url: "login.do",
                        dataType: "html",
                        data: { txtName: strTxtName, txtPass: strTxtPass },
                        success: function(data) {
                            if (data == "true") {
                                $(".divContent").html("操作提示,登录成功!");
                            }else {
                                $("#divError").show().html("用户名或密码错误!");
                            }
                        },
                        error:function(){
                            alert("出错了!");
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
      <form id="frmUserLogin">
          <div class="divFrame">
              <div class="divTitle"><span>用户登录</span></div>
              <div class="divContent">
                  <div id="divError" class="clsError"></div>
                  <div>名称:<input id="txtName" type="text" class="txt" /></div>
                  <div>密码:<input id="txtPass" type="password" class="txt" /></div>
                  <div>
                      <input id="btnLogin" type="button" value="登录" class="btn" />&nbsp;&nbsp
                      <input id="btnReset"  type="reset" value="取消" class="btn" />
                  </div>
              </div>
          </div>
      </form>
    </body>
    </html>

    2.创建一个后台处理的servlet---Login.java

    package com;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.net.URLDecoder;
    
    @WebServlet(name = "Login")
    public class Login extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            String strName = URLDecoder.decode(request.getParameter("txtName"), "UTF-8");
            String strPass = URLDecoder.decode(request.getParameter("txtPass"),"UTF-8");
            boolean blnLogin = false;
            if(strName.equals("admin") && strPass.equals("123456")){
                blnLogin = true;
            }
            response.getWriter().print(blnLogin);//此处的blnLogin将传到前面的login.html页面中,传给success: function(data){}中的data
        }
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doPost(request, response);
        }
    }

    3.配置web.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
             version="3.1">
        <servlet>
            <servlet-name>login</servlet-name>
            <servlet-class>com.Login</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>login</servlet-name>
            <url-pattern>/login.do</url-pattern> <!-- 此处的"/login.do"对应于login.html中的$.ajax()中的url的值"login.do" -->
        </servlet-mapping>
        <welcome-file-list>
            <welcome-file>login.html</welcome-file>
        </welcome-file-list>
    </web-app>

     

    在页面login.html中,通过页面中“登录”按钮的单击事件,调用$.ajax()方法,将获取的用户名和密码发送到服务器,服务器相应请求,向客户端发送处理后的数据,客户端根据回调的数据,显示不同的页面效果。

  • 相关阅读:
    luogu P1833 樱花 看成混合背包
    luogu P1077 摆花 基础记数dp
    luogu P1095 守望者的逃离 经典dp
    Even Subset Sum Problem CodeForces
    Maximum White Subtree CodeForces
    Sleeping Schedule CodeForces
    Bombs CodeForces
    病毒侵袭持续中 HDU
    病毒侵袭 HDU
    Educational Codeforces Round 35 (Rated for Div. 2)
  • 原文地址:https://www.cnblogs.com/weilunhui/p/4255179.html
Copyright © 2020-2023  润新知