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

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

小云云Original: 2018-01-01 10:23:381300Durchsuche

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>

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

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

c: $.load( )

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

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

e: as Datenparameter

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

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!

JavaScript jquery ajax servlet 封装 xml 事件异步

Stellungnahme：

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

Vorheriger Artikel：jQuery-Animations-Ajax-EreignisNächster Artikel：jQuery-Animations-Ajax-Ereignis

In Verbindung stehende Artikel

Mehr sehen