Of Stack

Examples of load of and post of in jQuery ajax are explained in detail

  • 2020-11-18 06:08:05
  • OfStack

This article illustrates the load() and post() methods of ajax in jQuery. To share for your reference, the details are as follows:

1. load () method

The load() method of jQuery ajax is able to load remote HTML file code and insert it into DOM. This is still 1 point different from post and get, but html, which loads one page at a time quickly, is saved to dom and can be executed.

The load() method USES GET by default and Post if the data parameter is passed.

Automatically converts 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 screened HTML code will be inserted in DOM. The syntax is "url #some" > selector", the default selector is body > *".

Explanation:

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

1. It is mainly used to directly return the Ajax interface of HTML
2.load is an jQuery wrapper set method, which needs to be called on the jQuery wrapper set and will load the returned HTML into the object. Even if the callback function is set, there is no denying that the load interface is cleverly designed and simple to use. The use of the Load interface is illustrated by an example:

load () function:

load(url, [data], [callback]) return value :jQuery

Parameter description:

url: ready to load HTML web site.
data :(optional) key/value data sent to the server.
callback :(optional) callback function on successful load.

The following is an example demonstration:

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


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax demo </title>
</head>
<body>
 The home of the script (www.ofstack.com), A large number of scripts and materials are available for download !
</body>
</html>

Then create the ES87en.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=" test " id="btn" />
<h2> The display is as follows: </h2>
<div id="result"></div>
<h2> Results: </h2>
<div id="display"></div>
</body>
</html>

The above example demonstrates how to use the Load method.

Tip:

We should always pay attention to the browser cache, when using GET, we should add the timestamp parameter (net Date()).getTime() to ensure that each time sent URL is different, can avoid the browser cache.

When a space is added to the end of the url parameter, such as "", the error" unrecognized symbol "will occur, but the request can still be sent normally. However, HTML to DOM could not be loaded. After deletion, the problem was resolved.

2. post () method

In jquery, ajax has two data sending modes, one is get(), as mentioned in the previous article, and the other is post(). Here again to give you 1, there is a need to understand the friends can refer to.

First recognize jQuery.post(url, [data], [callback], [type])

Parameters are explained as follows:

url: Send request address.
data: To be sent the Key/value parameter.
callback: Callback function on successful send.
type: Returns the content format, xml, html, script, json, text, _default.

Description:

Request load information via remote HTTP POST.

This is a simple POST request function instead of the complex $.ajax. The callback function is called when the request is successful. If you need to execute a function in case of an error, use $.ajax.

Let's start with a simple example 

<?php echo json_encode(array("name"=>$_POST['name']));?>

Then create the ES160en.html file. Note 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=" submit ">
</form>
<h2> The display is as follows: </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",// Process dynamic pages asynchronously 
   {name:$(".name").val()},// Get class name "name" The value of the text to NAME Asynchronous transfer value 
   function(data){//data Is the inverse value, function Reverse value processing 
     $(".content").val(data);// When the value is returned, fill it in with the class name "content" In the text box 
   });
  })
})
</script>

ajax. php code: 


<?php
$name=$_POST["name"];
if($name=="netxu"){
  echo " I'm sorry, ".$name." The data is ";
}
else{
  echo " Congratulations to you, ".$name." You can use ";
}
?>

I hope this article has been helpful for jQuery programming.

Related articles: