Web Front-end
JS Tutorial
Detailed explanation of load() and post() method examples of ajax in jQuery_jquery
Detailed explanation of load() and post() method examples of ajax in jQuery_jquery
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>显示的内容如下：</h2>
<div id="result"></div>
<h2>结果：</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
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>显示的内容如下：</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:
<?php
$name=$_POST["name"];
if($name=="netxu"){
echo "对不起，".$name."数据存在";
}
else{
echo "恭喜你，".$name."可以使用";
}
?>
I hope this article will be helpful to everyone in jQuery programming.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
How to use PUT request method in jQuery?
Feb 28, 2024 pm 03:12 PM
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
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?
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
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: <
How to implement PHP to jump to the page and carry POST data
Mar 22, 2024 am 10:42 AM
PHP is a programming language widely used in website development, and page jumps and carrying POST data are common requirements in website development. This article will introduce how to implement PHP page jump and carry POST data, including specific code examples. In PHP, page jumps are generally implemented through the header function. If you need to carry POST data during the jump process, you can do it through the following steps: First, create a page containing a form, where the user fills in the information and clicks the submit button. Acti in the form
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:
PHP code example: How to use POST to pass parameters and implement page jumps
Mar 07, 2024 pm 01:45 PM
Title: PHP code example: How to use POST to pass parameters and implement page jumps In web development, it often involves the need to pass parameters through POST and process them on the server side to implement page jumps. PHP, as a popular server-side scripting language, provides a wealth of functions and syntax to achieve this purpose. The following will introduce how to use PHP to implement this function through a practical example. First, we need to prepare two pages, one to receive POST requests and process parameters
PHP vs. Ajax: Solutions for creating dynamically loaded content
Jun 06, 2024 pm 01:12 PM
Ajax (Asynchronous JavaScript and XML) allows adding dynamic content without reloading the page. Using PHP and Ajax, you can dynamically load a product list: HTML creates a page with a container element, and the Ajax request adds the data to that element after loading it. JavaScript uses Ajax to send a request to the server through XMLHttpRequest to obtain product data in JSON format from the server. PHP uses MySQL to query product data from the database and encode it into JSON format. JavaScript parses the JSON data and displays it in the page container. Clicking the button triggers an Ajax request to load the product list.
