What is the difference between jquery and ajax in vue

Difference: 1. The ajax method in jquery can be called directly, but it cannot be called directly in vue, because vue itself does not support ajax requests and needs to be implemented with the help of a specified plug-in; 2. Asynchronous HTTP is executed in jquery Request, the syntax is "$.ajax({type:...,url:...,data:...,success:...,dataType:...})", and vue uses the syntax of the plug-in is "axios.get(url...)".

The operating environment of this tutorial: windows10 system, jquery3.4.1 version, Dell G3 computer.

What is the difference between jquery and ajax in vue

ajax in jQuery

ajax() method is used to perform AJAX (asynchronous HTTP) requests .

1.$.ajax() is the bottom-level ajax implementation in jQuery, and the higher-level ones are the $.get and $.post methods;

$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});

2.$.get method, when the request is successful If you want to have an operation when the request fails, use $.ajax()

$(selector).get(url,data,success(response,status,xhr),dataType)
$("button").click(function(){
  $.get("demo_ajax_load.txt", function(result){
    $("div").html(result);
  });
});

is the abbreviation of $.ajax

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Example:

3.$.post method

$("input").keyup(function(){
  txt=$("input").val();
  $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
    $("span").html(result);
  });
});

is the abbreviation for the following

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

4.$.getJSON()

Obtain json data through HTTP get request

is the abbreviation for the following

5. Two important methods

.serialize( ) Serialize the form content into a string;

.serializeArray() Serializes the form elements and returns JSON data structure data.

Ajax in VUE

vue itself does not support ajax requests, you need to use vue-resource, axios plug-in

vue2 officially recommends axios, which is a Promise-based HTTP request client will no longer maintain and update vue-resource;

axios([options])  
axios.get(url[,options]);

Parameter passing method:

1. Pass parameters through url

2. Passing parameters through params options

axios.post(url,data,[options]);

When axios sends data by default, the data format is Request Payload, which is not our commonly used Form Data format.

Therefore, the parameters must be passed in the form of key-value pairs, and cannot be passed in the form of json

Parameter passing method:

1. Splice them into key-value pairs yourself

2. Use transformRequest to convert the request data before sending the request

3. If you use modular development, you can use the qs module for conversion

axios itself does not support sending across There is no corresponding API provided for domain requests, and the author has no plans to add support for sending cross-domain requests in axios, so we can only use third-party libraries

Video tutorial recommendation:jQuery video tutorial

The above is the detailed content of What is the difference between jquery and ajax in vue. For more information, please follow other related articles on the PHP Chinese website!