• 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()方法,将获取的用户名和密码发送到服务器,服务器相应请求,向客户端发送处理后的数据,客户端根据回调的数据,显示不同的页面效果。

  • 相关阅读:
    #什么是spring#
    spark sql 判断一列是否包含某字符
    win10 安装微软商店
    python获取一段时间的日期
    css 网格
    css 网格属性总结
    css flex容器属性总结
    CSS Flexbox
    响应式Web设计
    css 伪类选择器
  • 原文地址:https://www.cnblogs.com/weilunhui/p/4255179.html
Copyright © 2020-2023  润新知