Ajax front-end and back-end interaction method

This time I will bring you the method of ajax front-end and back-end interaction. What are the precautions for the ajax front-end and back-end interaction? Here are practical cases, let’s take a look.

To exchange data with the backend that is often used in the front end, ajax is usually used.

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

--one is our common web api and controller,

First let's take a closer look 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 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) {
            //成功后的返回事件
          }
        });

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to handle errors when returning json data to ajax in spring mvc

ajax waterfall flow implementation demo Share (with code)

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