Using jquery Ajax to implement asynchronous access, asynchronous loading _jquery

This article realizes using jquery Ajax to realize asynchronous access and asynchronous loading, has certain reference value, the interested small partner may refer to.

"Asynchronous Access"

Use an example to illustrate: Click on the button to send the user input data sent to the server, and return the results to the page.

The first is the HTML hosting content:

<! DOCTYPE html> 
 
 

Configure server: server.php

<?php 
if (isset ($_get[' name ')) { 
  echo "name:". $_get[' name ']; 
} else{ 
  echo "parameter error"; 

Ajaxdemo.js Implementation Ajax Asynchronous access:

$ (document). Ready (function () { 
  $ ("#btn"). On ("click", Function () { 
    ///To prompt the user for information when communicating slowly with the server 
    $ ("#result"). Text (in the data request, please later ...); 
    Send request to Server (GET, Post) 
    $.get ("server.php", {name:$ ("#nameValue"). Val ()},function (data) { 
      $ ("#result"). Text (data); 
    }). Error (function () { 
      ///$ ("#result") when an exception occurs on the server 
      . Text ("Server is Maintaining")} 
  )}) 
 

Implementation effect:

"Load Asynchronously"

The main use of the load () method and the Getscript () method, specifically in one example illustrates:

Loads a fitting fragment in an existing HTML file, and a pop-up box that blocks the user from further action before the fragment load completes.

The first is the existing HTML code, without any content:

<! DOCTYPE html> 
 
 

A JS file Getdata.js write a function of the most rudimentary pop-up box hints for example:

function GetData () { 
  alert ("fragment content quoted from Sina Sports"); 
} 
A fragment box.htm, which hosts the fragment content to be loaded:
<div> 
   
 

The last write main.js to asynchronously load getdata.js and box.htm into an existing HTML file.

$ (document). Ready (function () { 
  ///Asynchronously load JS file 
  $.getscript ("Js/getdata.js"). Complete (function () { 
    getData (); 
  }) 
  Asynchronously loading fragment 
  $ ("body"). Text ("Load ...") 
  $ ("body"). Load ("box.htm", function (url,status,c) { 
    if (status==) Error ") { 
      $ (this). Text (" Fragment load Failed ");}}) 
 
 

Final effect:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.