Home Web Front-end JS Tutorial Detailed introduction to the ajax() method in jQuery

Detailed introduction to the ajax() method in jQuery

Jul 27, 2017 pm 04:25 PM
ajax jquery introduce

$.ajax() method:

* There are three main ways to send data
* 1.json array (recommended 1 )
* 2.url splicing
* 3.Serialize the form (recommended 2)

(1)json array (recommended 1)


<span style="font-size: 16px;"><strong><span style="color: #000000;">$(function(){
    var myClick = function(){
    var userName = $().val();
    var myDate = {userName:usrName};
    var myFunction = function(result){alert(result)};
    var eeorFunction = function(){alert("发生异常")};
    
    $.ajax({
          url:&#39;B&#39;,//目标为Servlet B发送请求地址
          type:&#39;GET&#39;,/*访问Servlet B请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。*/
          date:myDate,//把信息提交给Servlet数据
          dateType:&#39;text&#39;,//返回类型为文本类型
         success:myFunction,//成功后的回调函数,result为服务器返回的内容
         error:errorFunction,
         timeout:2000<br/><br/>      /*<br/>        $.ajax()以上7个方法都是常用方法。<br/>      */
    });
    }
    $("#img").click(myClick);
});         

</span><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="userName"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="userName"</span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="xiaoming"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="img"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="img/1.png"</span><span style="color: #0000ff;">></span>   <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></strong></span>
Copy after login

(2)url splicing

$(function(){
    var myClick = function(){
    var userName = $().val();
    var myDate = {userName:usrName};
    var myFunction = function(result){alert(result)};

    /*var eeorFunction = function(){alert("发生异常")};*/
    var errorFunction = function(XMLHttpRequest,textStatus){
    //alert(&#39;发生错误&#39;);
    if (XMLHttpRequest.status==404){
    alert(&#39;找不到服务器[404]&#39;);
    } else if(XMLHttpRequest.status==500){
    alert(&#39;服务器忙,请稍后再试[500]&#39;);
    }else{
    alert(&#39;服务器错误[&#39;+XMLHttpRequest.status+&#39;]&#39;);
    }
   } 
    $.ajax({
          url:&#39;B?userName=&#39;+$("#userName").val(),//目标为Servlet B发送请求地址

          type:&#39;GET&#39;,/*访问Servlet B请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。*/
          date:myDate,//把信息提交给Servlet数据
          dateType:&#39;text&#39;,//返回类型为文本类型
         success:myFunction,//成功后的回调函数,result为服务器返回的内容
         error:errorFunction,
         timeout:2000
    });
    }
    $("#img").click(myClick);
});         

<body>
    <form>
      <input id="userName" name="userName"value="xiaoming"><br>
      <img id="img" src="img/1.png">   

          </form></body>
Copy after login

(3) Serialize the form (recommended 2)

$(function(){

    var kk = $("#userName").serialize();
    var tt = $("#frm1").serialize();
    //alert(t    //var myClick = function    //var userName = $().val();
  //var myDate = {userName:usrName};    

     var myFunction = function(result){alert(result)};
    /*var eeorFunction = function(){alert("发生异常")};*/
   var errorFunction = function(XMLHttpRequest,textStatus){
    //alert(&#39;发生错误&#39;);
    if (XMLHttpRequest.status==404){
    alert(&#39;找不到服务器[404]&#39;);
    } else if(XMLHttpRequest.status==500){
    alert(&#39;服务器忙,请稍后再试[500]&#39;);
    }else{
    alert(&#39;服务器错误[&#39;+XMLHttpRequest.status+&#39;]&#39;);
    }
   } 
    $.ajax({
          url:&#39;B?userName=&#39;+$("#userName").val(),//目标为Servlet B发送请求地址

          type:&#39;GET&#39;,/*访问Servlet B请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。*/
          date:myDate,//把信息提交给Servlet数据
          dateType:&#39;text&#39;,//返回类型为文本类型
         success:myFunction,//成功后的回调函数,result为服务器返回的内容
         error:errorFunction,
         timeout:2000
    });
    }
    $("#img").click(myClick);
});         

<body>
    <form>
      <input id="userName" name="userName"value="xiaoming"><br>
    <input id="sex" name="sex" value="男"><br>
    <img id="img" src="img/1.png">   </form></body>
Copy after login

The above is the detailed content of Detailed introduction to the ajax() method in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1653
14
PHP Tutorial
1251
29
C# Tutorial
1224
24
PHP and Ajax: Building an autocomplete suggestion engine PHP and Ajax: Building an autocomplete suggestion engine Jun 02, 2024 pm 08:39 PM

Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.

How to get variables from PHP method using Ajax? How to get variables from PHP method using Ajax? Mar 09, 2024 pm 05:36 PM

Using Ajax to obtain variables from PHP methods is a common scenario in web development. Through Ajax, the page can be dynamically obtained without refreshing the data. In this article, we will introduce how to use Ajax to get variables from PHP methods, and provide specific code examples. First, we need to write a PHP file to handle the Ajax request and return the required variables. Here is sample code for a simple PHP file getData.php:

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

What is Dogecoin What is Dogecoin Apr 01, 2024 pm 04:46 PM

Dogecoin is a cryptocurrency created based on Internet memes, with no fixed supply cap, fast transaction times, low transaction fees, and a large meme community. Uses include small transactions, tips, and charitable donations. However, its unlimited supply, market volatility, and status as a joke coin also bring risks and concerns. What is Dogecoin? Dogecoin is a cryptocurrency created based on internet memes and jokes. Origin and History: Dogecoin was created in December 2013 by two software engineers, Billy Markus and Jackson Palmer. Inspired by the then-popular "Doge" meme, a comical photo featuring a Shiba Inu with broken English. Features and Benefits: Unlimited Supply: Unlike other cryptocurrencies such as Bitcoin

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ​​the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

Introduction to the online score checking platform (convenient and fast score query tool) Introduction to the online score checking platform (convenient and fast score query tool) Apr 30, 2024 pm 08:19 PM

A fast score query tool provides students and parents with more convenience. With the development of the Internet, more and more educational institutions and schools have begun to provide online score check services. To allow you to easily keep track of your child's academic progress, this article will introduce several commonly used online score checking platforms. 1. Convenience - Parents can check their children's test scores anytime and anywhere through the online score checking platform. Parents can conveniently check their children's test scores at any time by logging in to the corresponding online score checking platform on a computer or mobile phone. As long as there is an Internet connection, whether at work or when going out, parents can keep abreast of their children's learning status and provide targeted guidance and help to their children. 2. Multiple functions - in addition to score query, it also provides information such as course schedules and exam arrangements. Many online searches are available.

Introduction to the eighth color weapon of Neon Abyss Introduction to the eighth color weapon of Neon Abyss Mar 31, 2024 pm 03:51 PM

The eighth color is a weapon in Neon Abyss. Many players want to know about the ballistics of the eighth color of the weapon and how to play with the weapon strength. So let’s take a look at the detailed guide to Neon Abyss’ eighth color weapon trajectory, weapon strength, and weapon gameplay. Neon Abyss Color 8 Detailed Guide Weapon Introduction: The Wizard’s Secret Weapon! Weapon attack speed: Normal Weapon strength: Moderate Weapon gameplay: The attack method of the eighth color is three single-target attacks and then launches a ray. Ballistic display:

Detailed introduction of Samsung S24ai functions Detailed introduction of Samsung S24ai functions Jun 24, 2024 am 11:18 AM

2024 is the first year of AI mobile phones. More and more mobile phones integrate multiple AI functions. Empowered by AI smart technology, our mobile phones can be used more efficiently and conveniently. Recently, the Galaxy S24 series released at the beginning of the year has once again improved its generative AI experience. Let’s take a look at the detailed function introduction below. 1. Generative AI deeply empowers Samsung Galaxy S24 series, which is empowered by Galaxy AI and brings many intelligent applications. These functions are deeply integrated with Samsung One UI6.1, allowing users to have a convenient intelligent experience at any time, significantly improving the performance of mobile phones. Efficiency and convenience of use. The instant search function pioneered by the Galaxy S24 series is one of the highlights. Users only need to press and hold

See all articles