jQuery Study Notes - Ajax Operation (2) - Data Transfer

jQuery Study Notes - Ajax Operation (2) - Data Transfer_jquery

WBOY

Release： 2016-05-16 16:43:28

Original

1168 people have browsed it

Request data

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

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

Copy after login

The current page content is:

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

Copy after login

We hope to obtain the age information without refreshing the page after clicking the a tag. First request data using GET method:

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);
  });
 });

Copy after login

After clicking the a tag, the current page is:

Data request successful. Let’s test it again using 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);
  });
 });

Copy after login

The code is almost the same, except that the get method is changed to the 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);
 });

Copy after login

Send data

In addition to using Ajax technology to obtain data from the backend, you can also send data 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>

Copy after login

Assume that the verification passes when the user name is stephenlee and 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';
}

Copy after login

Use the get method to 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);
  });
 });

Copy after login

After entering the wrong username lucas, the result is: