Various gestures of front-end ajax interacting with the back-end (graphic tutorial)

This article mainly introduces various related knowledge of front-end ajax and back-end interaction, which has a good reference value. Let’s take a look at it together

The front-end is often used to exchange data with the back-end, usually using the ajax method

But there are many ways to interact, and a lot depends on Regarding the properties of your backend, here I will mainly list two methods that are commonly used in my current project

--One is our common web api and controller,

First let’s take a closer look Ajax to interact with webapi data

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

I Yongchang uses GET and POST here

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

 $.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 back-end during the initialization of the web page and then assigns it to the page (Maybe my professional terminology is not standard, please forgive me QAQ)

Then what I want to talk about 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 that when you Just add [HTTPPOST] to the WEBAPI method

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 it. AJAX, mainly because AJAX can see where your psot errors are. 233

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

dwz How to remove ajaxloading (graphic tutorial)

FormData Ajax upload Progress Monitoring

The loading waiting effect before Ajax returns data (graphic tutorial)

The above is the detailed content of Various gestures of front-end ajax interacting with the back-end (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!