Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung mehrerer häufig verwendeter Funktionen von Ajax in jQuery

Detaillierte Erläuterung mehrerer häufig verwendeter Funktionen von Ajax in jQuery

小云云
Freigeben: 2018-01-01 10:23:38
Original
1346 Leute haben es durchsucht

AJAX ist eine Technologie, die es Ihnen ermöglicht, Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu laden zu müssen. In diesem Artikel werde ich einige häufig verwendete Funktionen im Zusammenhang mit Ajax in jQuery vorstellen. Freunde, die sie benötigen, können darauf verweisen.

Erstens:

AJAX ist eine Technologie, die einen Teil einer Webseite aktualisieren kann, ohne die gesamte Webseite neu laden zu müssen.

Was ist AJAX?

AJAX = Asynchrones JavaScript und XML.

AJAX ist eine Technologie zur Erstellung schneller, dynamischer Webseiten.

AJAX ermöglicht die asynchrone Aktualisierung von Webseiten durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Wenn bei herkömmlichen Webseiten (die kein AJAX verwenden) der Inhalt aktualisiert werden muss, muss die gesamte Webseite neu geladen werden.

Es gibt viele Anwendungsfälle, die AJAX verwenden: Sina Weibo, Google Maps, Kaixin.com usw.

2: Traditionelles Ajax ist zu umständlich. Jquer kapselt einige einfache Funktionen, die häufig in Ajax verwendet werden.

a: $.ajax() Methode:

JSP-Seitencode:

<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>
Nach dem Login kopieren

Servlet-Hintergrundcode:

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");
    }
  }
Nach dem Login kopieren

b: $ Die Methoden .get(), $.post() und $.getJson sind alle vereinfachte Versionen der Methode $.ajax(). Ihre Verwendung ist ungefähr gleich, bis auf einen Typ weniger

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

c: $.load( )

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

d:$(selector).serializeArray() und $(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);
Nach dem Login kopieren

e: as Datenparameter

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

Verwandte Empfehlungen:

jQuery-Animations-Ajax-Ereignis

Detaillierte Erläuterung der Beispiele für Datenparametertypen jQuery.Ajax()

Detaillierte Erläuterung der JQuery AJAX-Parameter mit zusätzlichen Beispielen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung mehrerer häufig verwendeter Funktionen von Ajax in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage