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

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

WBOY

Release： 2016-05-16 15:21:43

Original

1676 people have browsed it

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>

Copy after login

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>

Copy after login

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>显示的内容如下：</h2>
<div id="result"></div>
</body>
</html>

Copy after login

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>

Copy after login

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>

Copy after login

ajax.php code:

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

Copy after login

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