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

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

The current page content is:

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

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

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

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

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>

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

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

After entering the wrong username lucas, the result is:

After entering the correct username stephenlee, the result is:

The idea of ​​using post method to send data is the same, so I won’t go into details here.