Explication détaillée de plusieurs fonctions couramment utilisées d'Ajax dans jQuery-js tutoriel-php.cn

Explication détaillée de plusieurs fonctions couramment utilisées d'Ajax dans jQuery

小云云

Libérer： 2018-01-01 10:23:38

original

1351 Les gens l'ont consulté

AJAX est une technologie qui permet de mettre à jour des parties d'une page Web sans recharger la page entière. Cet article partagera avec vous plusieurs fonctions courantes liées à Ajax dans jQuery. Les amis qui en ont besoin peuvent s'y référer, j'espère qu'ils pourront vous aider.

Un :

AJAX est une technologie qui permet de mettre à jour une partie d'une page Web sans recharger la page Web entière.

Qu'est-ce qu'AJAX ?

AJAX = JavaScript et XML asynchrones.

AJAX est une technologie permettant de créer des pages Web rapides et dynamiques.

AJAX permet de mettre à jour les pages Web de manière asynchrone en échangeant une petite quantité de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

Pour les pages web traditionnelles (n'utilisant pas AJAX), si le contenu doit être mis à jour, la page web entière doit être rechargée.

Il existe de nombreux cas d'application utilisant AJAX : Sina Weibo, Google Maps, Kaixin.com, etc.

2 : L'Ajax traditionnel est trop lourd. jquer encapsule certaines fonctions simples couramment utilisées en ajax.

a : méthode $.ajax() :

code de la page jsp :

<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>

Copier après la connexion

code d'arrière-plan du servlet :

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");
    }
  }

Copier après la connexion

b : $ Les méthodes .get(), $.post() et $.getJson sont toutes des versions simplifiées de la méthode $.ajax(). Leur utilisation est à peu près la même, à l'exception d'un type en moins

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

Copier après la connexion

. c : $.load()

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

Copier après la connexion

d:$(selector).serializeArray() et $(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);

Copier après la connexion

e : comme paramètre de données

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

Copier après la connexion

Recommandations associées :

événement ajax d'animation jQuery

Explication détaillée des exemples de types de paramètres de données de jQuery.Ajax()

Explication détaillée des paramètres JQuery AJAX avec des exemples supplémentaires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!