Detailed explanation of load() and post() method examples of ajax in jQuery

Home

Web Front-end

JS Tutorial

Detailed explanation of load() and post() method examples of ajax in jQuery_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

ajaxjqueryloadpost

The example in this article describes the load() and post() methods of ajax in jQuery. Share it with everyone for your reference, the details are as follows:

1. load() method

The load() method of jQuery ajax can load the remote HTML file code and insert it into the DOM. This is still a little different from post and get, but it can quickly load the html of a page and save it to DOM and executable.

The load() method uses the GET method by default. If the data parameter is passed, the Post method is used.

Automatically convert to POST mode when passing additional parameters. In jQuery 1.2, you can specify a selector to filter the loaded HTML document, and only the filtered HTML code will be inserted into the DOM. The syntax is "url #some > selector", and the default selector is "body>*".

Explanation:

load is the simplest Ajax function, but its use has limitations:

1. It is mainly used for Ajax interfaces that directly return HTML
2. Load is a jQuery wrapper method that needs to be called on the jQuery wrapper and will load the returned HTML into the object. Even if a callback function is set, it is undeniable that the load interface is cleverly designed and simple to use. Here is an example: Demonstrate the use of Load interface:

load() function:

Function introduction: load(url, [data], [callback]) Return value: jQuery

Parameter description:

url: URL of the HTML webpage to be loaded.
data: (optional parameter) key/value data sent to the server.
callback: (optional parameter) callback function when loading is successful.

An example demonstration is given below:

First create the test.html file that needs to be loaded:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax演示</title>
</head>
<body>
脚本之家(www.jb51.net),提供大量脚本及素材供大家下载!
</body>
</html>

Then create the ajax.html file and remember to introduce jquery.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#btn").click(function(){
  $("#result").load("test.html",function(responseText,textStatus){
  $("#display").append("<hr>responseText:"+responseText);
  $("#display").append("<hr>textStatus:"+textStatus);
  }); 
 });
 });
</script>
</head>
<body>
<input type="button" value="测试" id="btn" />
<h2 id="显示的内容如下">显示的内容如下：</h2>
<div id="result"></div>
<h2 id="结果">结果：</h2>
<div id="display"></div>
</body>
</html>

The above example demonstrates how to use the Load method.

Tips:

① We must always pay attention to browser caching. When using the GET method, we must add the timestamp parameter (net Date()).getTime() to ensure that the URL sent is different each time to avoid browser caching.

② When a space is added after the url parameter, such as " ", an "unrecognized symbol" error will appear, and the request can still be sent normally. However, the HTML cannot be loaded into the DOM. The problem is solved after deleting it.

2. post() method

Ajax in jquery has two data sending modes, one is get(), which was mentioned in the previous article, and the other is post(). Let me introduce it to you again. Friends who need to know more can refer to it.

First of all, you need to know jQuery.post(url, [data], [callback], [type])

Describe the parameters:

url: Send request address.
data: Key/value parameters to be sent.
callback: callback function when sending successfully.
type: Return content format, xml, html, script, json, text, _default.

Description:

Load information via remote HTTP POST request.

This is a simple POST request function to replace the complex $.ajax. The callback function can be called when the request is successful. If you need to execute a function on error, use $.ajax.

Let’s look at a simple example first

Copy code The code is as follows:

$_POST[ 'name']));?>

Then create the ajax.html file, pay attention to the js code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#sub").click(function(){
  $.post("testPost.php",{name:$("#name").val()},function(data,textStatus){
  $("#result").append("data:"+data.name);
  $("#result").append("<br>textStatus:"+textStatus);
  },"json");
  return false;
 });
 });
</script>
</head>
<body>
<form action="testPost.php" method="post">
 <input type="text" name="name" id="name" >
 <input type="submit" id="sub" value="提交">
</form>
<h2 id="显示的内容如下">显示的内容如下：</h2>
<div id="result"></div>
</body>
</html>

Usage 2: (Click post data to return data)

<input type="button" id="bnajax" value="ajax" onclick="ajaxTest()" />
<script type="text/javascript" >
 function ajaxTest()
 {
 $.post("http://localhost:8012/t.asp", { "txt": "123" },function(data)
 {
  $("#divMsg").html(data);
 }
 );
 }
</script>

Example 3

JS code:

<script>
$(document).ready(function(){
  $(".ajax_btn").click(function(){
   $.post("ajax.php",//异步处理动态页面
   {name:$(".name").val()},//获取类名为"name"文本的值，以NAME异步传值
   function(data){//data为反回值，function进行反回值处理
     $(".content").val(data);//获得得反回值后，将其填入到类名为"content"的文本框中
   });
  })
})
</script>

ajax.php code:

<&#63;php
$name=$_POST["name"];
if($name=="netxu"){
  echo "对不起，".$name."数据存在";
}
else{
  echo "恭喜你，".$name."可以使用";
}
&#63;>

I hope this article will be helpful to everyone in jQuery programming.

Statement

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

JavaScript: Exploring the Versatility of a Web LanguageApr 11, 2025 am 12:01 AM

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

The Evolution of JavaScript: Current Trends and Future ProspectsApr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

Demystifying JavaScript: What It Does and Why It MattersApr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Is Python or JavaScript better?Apr 06, 2025 am 12:14 AM

Python is more suitable for data science and machine learning, while JavaScript is more suitable for front-end and full-stack development. 1. Python is known for its concise syntax and rich library ecosystem, and is suitable for data analysis and web development. 2. JavaScript is the core of front-end development. Node.js supports server-side programming and is suitable for full-stack development.

How do I install JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript does not require installation because it is already built into modern browsers. You just need a text editor and a browser to get started. 1) In the browser environment, run it by embedding the HTML file through tags. 2) In the Node.js environment, after downloading and installing Node.js, run the JavaScript file through the command line.

How to send notifications before a task starts in Quartz?Apr 04, 2025 pm 09:24 PM

How to send task notifications in Quartz In advance When using the Quartz timer to schedule a task, the execution time of the task is set by the cron expression. Now...

In JavaScript, how to get parameters of a function on a prototype chain in a constructor?Apr 04, 2025 pm 09:21 PM

How to obtain the parameters of functions on prototype chains in JavaScript In JavaScript programming, understanding and manipulating function parameters on prototype chains is a common and important task...