Detailed explanation of front-end ajax and back-end interaction

To exchange data with the back-end that is often used in the front-end, ajax is usually used. This article mainly introduces various related knowledge of the front-end ajax and the back-end interaction, which has a good reference value. Let’s take a look with the editor below, I hope it can help everyone.

But there are many ways to interact, many of which depend on the properties of your backend. Here I will mainly list two methods that are commonly used in my current projects

--One is our common web api and controller,

First of all, let’s take a closer look at the interaction data between ajax and webapi

Here is a brief description of the four properties of web api-GET, POST, PUT, DELETE

Here I, Yongchang, use GET and POST

If we need to use AJAX to interact with the data at the back end

 $.ajax({
    url: "你的webapi",
    type: "Get",
    DATA{},//这里面写你要传给后端的数据，不过GET方法一般不需要，直接读就可以了
    success: function (data) {
       //成功后的return事件
      }
    error: function (data) {
      alert("data");//请求错误后的报错事件(很重要，如果你报错了不知道哪儿要改的话这个可以帮助你，我个人感觉主要是500报错)
    }
  })

This kind of GET usually reads some data from the backend when the web page is initialized and then assigns it to the page (maybe my professional terminology is not standard, please forgive QAQ)

Then what I want to talk about It is the POST method

$.ajax({
    url: "你的webapi",
    type: "POST",
    DATA{},//这里面写你要传给后端的数据，这里面有点十分重要就是你的webapi方法上面一定要加[HTTPPOST]不然会500报错
    success: function (data) {
       //成功后的return事件
      }
    error: function (data) {
      alert("data");//请求错误后的报错事件(很重要，如果你报错了不知道哪儿要改的话这个可以帮助你，我个人感觉主要是500报错)
    }
  })

The general POST method is the same as the usual ajax method, just remember to add [HTTPPOST] to your WEBAPI method

For the rest, I want to summarize some POST to controller methods that are sometimes used. Although the controller can directly URLPOST, I personally still like to use AJAX, mainly because AJAX can see where my own psot errors are. 233

$.ajax({
          url: 你的控制器/你的控制器方法名字,
          type: 'POST',
          dataType: 'json',
          data: ,//依旧是你要传递参数的值
          contentType: “”application/json”,//这儿是告诉你传递参数一定是要json格式的啊  
          success: function (data) {
            //成功后的返回事件
          }
        });

It is worth mentioning that the values ​​I personally pass feel to be of json type, and I have not yet tested passing non-json type parameters;

Related recommendations:

php modularization for front-end ajax call implementation ajax php post jquery ajax php ajax points

Ajax implementation of dynamic loading of data strength sharing

Example detailed explanation js combined with json to implement ajax simple example

The above is the detailed content of Detailed explanation of front-end ajax and back-end interaction. For more information, please follow other related articles on the PHP Chinese website!