Analysis of jQuery Ajax Operation (2) Data Transfer

In the previous article, the examples of data loading of <a href="http://www.php.cn/wiki/1495.html" target="_blank">jquery</a> Ajax are all obtained from static files, and Ajax The greater value lies in data transfer with the back-end server, dynamically requesting and sending data.

Request data

We can use GET and POST to request data from the backend. Here we take PHP as an example, assuming there is a test Page age.php, used to return age information, the content is:

if(isset($_REQUEST['name']) && $_REQUEST['name'] == 'stephen') {
    echo '23';
}

The current page content is:

<p>
  <a href="age.php">stephen</a>
  <span>age : </span>
  <span id="sex"></span>
</p>

##We hope After clicking the

a tag, get the age information without refreshing the page. First use the GET method to request data:

GET method

  $('a').click(function(e) {
    e.preventDefault();//
    var url = $(this).attr('href'),
      name = $(this).text(),
      requestData = {'name': name};

    $.get(url, requestData, function(data) {
      $('#sex').html(data);
    });
  });

After clicking the

a tag, the current page is:

Data request successful. Let’s test again using the

POST method:

POST method

  $('a').click(function(e) {
    e.preventDefault();//
    var url = $(this).attr('href'),
      name = $(this).text(),
      requestData = {'name': name};

    $.post(url, requestData, function(data) {
      $('#sex').html(data);
    });
  });

The code is almost the same, except that the

get method is changed to post method. Here we can actually use the
load method to simplify the code:

  $('a').click(function(e) {
    e.preventDefault();
    var url = $(this).attr('href'),
      name = $(this).text(),
      requestData = {'name': name};

    $('#sex').load(url, requestData);
  });

Send data

In addition to using

Ajax technology to get it from the backend Data can also be sent to the backend. A common scenario is to submit a form asynchronously. Here is user verification as an example:

<form action="validate.php">
  username:<input id="username" name="username" type="text" />
  password:<input id="password" name="password" type="text" />
  <input value="submit" type="submit" />
</form>

Assume that when the user name is

stephenlee, the verification passes when the password is 123456, otherwise it fails. The test page validate.php is:

if($_REQUEST['username'] == 'stephenlee' && $_REQUEST['password'] == '123456') {
    echo 'pass';
} else {
    echo 'fail';
}

Use the

get method Send data to the backend for verification:

  $('form').submit(function(e) {
    e.preventDefault();//
    var url = $(this).attr('action'), 
      username = $('input[name="username"]').val(),
      password = $('input[name="password"]').val(),
      requestData = {'username': username, 'password': password};

    $.get(url, requestData, function(result) {
      alert(result);
    });
  });

After entering the wrong user name

lucas, the result is:

Enter the correct user name

stephenlee, the result is:

The idea of ​​sending data using the

post method is the same, so I won’t go into details.

The above is the detailed content of Analysis of jQuery Ajax Operation (2) Data Transfer. For more information, please follow other related articles on the PHP Chinese website!