Detailed explanation of several commonly used functions of Ajax in jQuery-JS Tutorial-php.cn

Detailed explanation of several commonly used functions of Ajax in jQuery

小云云

Release： 2018-01-01 10:23:38

Original

1346 people have browsed it

AJAX is a technology that can update parts of a web page without reloading the entire web page. This article will share with you several common functions related to Ajax in jQuery. Friends who need them can refer to them. I hope they can help you.

AJAX is a technology that can update part of a web page without reloading the entire web page.

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technology for creating fast, dynamic web pages.

By exchanging a small amount of data with the server in the background, AJAX can enable asynchronous updates of web pages. This means that parts of a web page can be updated without reloading the entire page.

For traditional web pages (not using AJAX), if the content needs to be updated, the entire web page must be reloaded.

There are many application cases using AJAX: Sina Weibo, Google Maps, Kaixin.com, etc.

2: Traditional Ajax is too cumbersome. jquer encapsulates some simple functions commonly used in ajax.

a: $.ajax() method:

jsp page code:

<head>
  <title>Ajax验证</title>
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("[name='userName']").blur(function () {     
        $.ajax({
          type: "post",
          url: "/TestServlet",
          data:{action:"login"},     //data 传递的参数一般都是key：“ value” 类型的 value一定要加引号 我亲身体验 那种找不到错的感觉
          // dataType:'Text',      //servers 返回的格式 也可以是gjon
          success: function (data) {
            if (data == "success") {
              alert(data);
              $("#myspan").html(data);
            }
          },
          error: function () {      //这个用的比较少
          }
        })
      })
    })
  </script>
</head>
<body>
   姓名： <input name="userName" type="text"><span id="myspan"></span>
   密码: <input name="password" type="text">
</body>

Copy after login

servlet background code:

public class TestServlet extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String name = request.getParameter("action");
    System.out.println(name);
    if(name.equals("login")){
      response.getWriter().write("success");  //返回回掉函数的参数
    }else{
      response.getWriter().write("file");
    }
  }

Copy after login

b: $.get() , the $.post() and $.getJson methods are both simplified versions of the $.ajax() method, and their usage is roughly the same, except for one less type

$.post("/TestServlet",
         {"uname":$('[name=uname]').val()},
         function (data) {
           alert(data);
         });

Copy after login

c: $.load()

$("#msg").load(     //可以直接拿到文本框 的值
         "/TestServlet","action="+$('[name="userName"]').val()
         );
//后台可以直接 根据request.getParameter（）拿到参数的值

Copy after login

d:$(selector).serializeArray() and $(selector).serialize()

 //这种方法 可以直接 获得form表单的name属性值，作为data的传参
 var data1 = $("#form1").serializeArray(); //自动将form表单封装成json
           $.each(data1,function (i,dom) {
             alert(dom.name+"\r\n"+dom.value);
           });
           var data2=$("#form1").serialize();
           alert(data2);

Copy after login

e: as data parameter

 var data2=$("#form1").serialize();
           $.getJSON("/TestServlet",data2, function (data) {
              alert(data);
           });

Copy after login

Related recommendations:

jQuery animation ajax event

Detailed explanation of the data parameter type instance of jQuery.Ajax()

JQuery AJAX Detailed explanation of parameters with additional examples

The above is the detailed content of Detailed explanation of several commonly used functions of Ajax in jQuery. For more information, please follow other related articles on the PHP Chinese website!