the front

Although JQ is not used in our work now, we all use VUE or react, but JQ has also set up an era. In my spare time, I sorted out some methods of JQ calling AJAX, and some interfaces for beginners to learn (Note: please contact me if you find the interface online). All right, no more bullshit. Let's get dry

About AJAX (Baidu Encyclopedia)

Ajax, namely "Asynchronous Javascript And XML", refers to a web page development technology that creates interactive and fast dynamic web page applications. It can update some web pages without reloading the whole web page.
By exchanging a little data with the server in the background, Ajax can make the web page update asynchronously. This means that a part of the page can be updated without reloading the entire page.
In fact, what I understand is that data can be obtained from the server, and now this technology is up-to-date, and everyone is using it. As for any performance problem, it's not for Xiaobai to consider (manual dog head)

JQ calls AJAX instance

1. load() method of jquery

The load() method loads the data from the server and puts the returned data into the selected element.
Syntax:
$("selector").load(url,data,callback);
The required url parameter specifies the url address recorded
The optional data parameter specifies the set of query string key / value pairs to be sent with the request
The optional callback parameter is the name of the function executed after the load() method completes
example:

1,
$('#btn').click(function(){

    //Only a url is passed, indicating that it is loaded in the element with id ා new projects index.html
    $('#new-projects').load('./index.html');
})
2,
$('#btn').click(function(){
    //Only one url, imported index.html The file contains multiple transfer parameters, similar to: index/html?name = 'Zhang San'
    $('#new-projects').load('./index.html',{"name":'Zhang San',"age":12});
})
3,
    //After loading the file, there will be a callback function indicating that the function loaded successfully
    $('#new-projects').load('./index.html',{"name":'Zhang San',"age":12},function(){

});

2. getJSON method of jquery

jQuery uses the getJSON() method in AJAX to load JSON format data asynchronously. Get the data in the server, analyze the data and display it in the page
Syntax:
$.getJSON(url,[data],[callback])
The url parameter is the server address of the request to load the json format file, the optional data parameter is the data sent when the request is made, and the callback parameter is the function executed after the data request is successful
example:

  $.getJSON("./data/getJSON.json", function (data) {
       var str = "";//Initialize save content variable
       $.each(data, function(index,ele) {
          $('ul').append("<li>"+ele.name+"</li>")

          });
       })

3.jquery's $. get() method

The $. get() method requests data from the server through an HTTP GET request#
Syntax:
$.get(URL,callback);

The url parameter specifies the path of your request, which is a required parameter. The callback parameter is a function executed after the data request succeeds
example:

                $.get('./data/getJSON.json',function(data,status){
    console.log(status);   //Meaning of success 200 status code ok              
})

4.jquery's post() method

Compared with the get() method, the post() method is mainly used to send data to the server through POST. After the server receives the data, it processes it and returns the processing results to the page#
Syntax: $. post(URL,data,callback);

The url parameter specifies the path of your request. It is a required parameter. The optional data parameter is the data sent with the request. The optional callback parameter is the function executed after the data request succeeds

 $.post('/index',{name:'Zhang San'},function(data,status){
      console.log(status);

 })

5. jquery's $. ajax() method

Focus! Focus! The most common method, none of which
//get() method

$.ajax({
    url:url,
    type:'get',
    dataType:'text',
    success:function(data){
       console.log(data)

    },
    error:function(error){
       console.log(error)
    }

//post() mode

$.ajax({
  url:url,
  type:'post',
  data:{name:'Zhang San',age:12},
  success:function(data){
     console.log(data)
  },
  error:function(error){
     console.log(error)
}

Free interface

This is what I found on the Internet, and it's not what I wrote. It's better to use it for learning. It can be used by personal test. Use the $. ajax() method call of jquery to change the url address. Pay attention to the request method.

Get a piece of data
Request address: https://autumnfish.cn/api/joke
Request method: get
Request parameters: None
Response content: random joke
Get multiple data
Request address: https://autumnfish.cn/api/joke/list
Request method: get
Request parameter: num
Parameter name: num
Parameter Description: number of jokes
Note: the type is number, do not give it wrong
Response content: JSON

{
 "msg": "Get 10 jokes",
 "jokes": [
   "Why do women always say to their benefactor in ancient costume dramas: little women have no idea of what to repay, but they only agree with each other by their own example? Does this really exist in ancient times? Bullshit, that's because she likes him. If she doesn't like him, she will say: the little girl doesn't think it's going to be reported, only in the next life.",
   "Just now I played a werewolf kill, net kill. I'm the last wolf, the leaping prophet. The game has been three on one, and I'm leading the wind direction of the good guys camp, which has already been agreed to jointly produce 4. Then I killed one of them and won the victory. As a result, in my speaking phase While trying to perform All of a sudden, my roommate shouted You are a werewolf!",
   "I came back from other places yesterday, but I didn't go home. I saw my father drunk on the sofa when I got home today. Dad: "when did you come back?" Me: "I came back last night.". He said angrily, "did you come back from the bowl? Why don't you come back in the basin? " I...",
   "On the way, I saw a black plastic bag kicking. It was a big black dog sleeping. It was chased for three miles.",
   "A timid witness is being questioned by a lawyer. "Have you ever been married?" the lawyer snapped "Yes, I did once." The witness's voice was small and trembling. "So who are you married to?" "A woman." The lawyer got angry. "Nonsense, of course you married a woman. Have you heard of anyone who would marry a man? " "Yes, my sister," said the witness, shaking.",
   "A female star walked into the shoe store and tried several pairs of shoes that didn't fit. The boss squatted down to measure her feet. The female star was nearsighted. Seeing the boss's bald head, she thought her knee was showing, so she covered it with a skirt. However, she immediately heard the boss's muffled cry: "real bastard, there's a power cut again."",
   "A drunk driver is stopped by traffic police at Beibin Road, Jiangbei, Chongqing.As soon as he got out of the car, the man picked up a bottle of Wuliangye and drank half of it as soon as he lifted his neck.And then he said, "I'm not driving after drinking, I'm drinking after driving.Now that I've had a drink, I can't drive, or I'll be in custody for six months.I'll park my car here. You can give me a ticket and drag it away.I'll pick up the car tomorrow after I take a taxi. ".Traffic police at a loss...",
   "I had too much last night. My wife was not at home, so I asked my daughter to pour me a glass of sugar water. "Can I have any sugar?" the daughter asked I said yes. A few minutes later, I saw my daughter shaking a glass of water with some chewing gum floating on it.",
   "Yesterday, I found out that there are five yuan high imitations in the stall downstairs iPhone7 Model, so I bought one and pretended to make a phone call by the side of a square with many people:"Mom, go to the labor force. The labor force won't forgive you. Break up. "Then he threw the mobile phone model into the river and took out a cigarette. He pretended to be melancholy and stood in a ecstatic position. He looked at many girls beside him and looked at me with the florid expression. I'm thinking about whether it's a double flight or a group tonight P When I was having a headache, a small basin friend came to pat me and said loudly to me:"Uncle, your mobile phone is floating up... I hate little pot friends the most",
   "In the evening, I called: "master, is that you on the service card?" He: "yes." Me: "I think you drive very well?" He: "OK." Me: "look at your level. Have you ever driven a car before?" He's not confident B "Yes, yes," he said! You can see that. " Me: "that's the occupational disease left by driving in circles?" He..."
 ]
}

User authentication
Verify that the user name is available
Request address: https://autumnfish.cn/api/user/check
Request method: post
Request parameter: username
Parameter name: username
Parameter Description: user name
Note: cannot be empty, passed by send method, format is key=value
Response content: whether the user name is available
User registration
Registered users
Request address: https://autumnfish.cn/api/user/register
Request method: post
Request parameter: username
Parameter name: username
Parameter Description: user name
Note: cannot be empty, format is key=value
Response content: Registration succeeded or failed
Query data according to id
Query hero's nickname according to hero's name
Request address: https://autumnfish.cn/api/hero/simple
Example: https://autumnfish.cn/api/hero/simple?name= Timo
Request method: get
Request parameter: name
Note: name cannot be empty. It is directly followed by url. Format name=xxx
Response content: Hero's nickname
Query multiple data according to name
Request address: https://autumnfish.cn/api/hero/info
Example: https://autumnfish.cn/api/hero/info?name= Timo
Request method: get
Request parameter: name
Note: name cannot be empty. It is directly followed by url. Format name=xxx
Response content:

{
  "title": "Swift scouting",
  "name": "Timo",
  "bg": "http://img1.dwstatic.com/lol/1512/315320556654/1451366974753.jpg",
  "icon": "http://img.dwstatic.com/lol/1310/246295394773/1382341114833.png",
  "story": "Teemo There is also a hidden passive skill, that is, a global taunt face. Every Regiment Battle is bound to be set on fire by enemy tanks and assassin heroes. Your job is to use mushroom kites to attack every one of your people, keep alive and kill people if possible."
}

Query details according to name
Query hero's details according to hero's name

Request address: https://autumnfish.cn/api/hero/detail
Example: https://autumnfish.cn/api/hero/detail?name= Timo
Request method: get
Request parameter: name
Note: name cannot be empty. It is directly followed by url. Format name=xxx
Response content:

{
  "title": "Swift scouting",
  "name": "Timo",
  "bgs": [
    "http://img1.dwstatic.com/lol/1512/315320556654/1451366974753.jpg",
    "http://img4.dwstatic.com/lol/1512/315320556654/1451366988149.jpg",
    "http://img2.dwstatic.com/lol/1601/317240712104/1453285617943.jpg",
    "http://img3.dwstatic.com/lol/1601/317240712104/1453285624688.jpg",
    "http://img3.dwstatic.com/lol/1601/317240712104/1453285633565.jpg",
    "http://img.dwstatic.com/lol/1601/317240712104/1453285642044.jpg",
    "http://img2.dwstatic.com/lol/1601/317240712104/1453285650321.jpg",
    "http://img5.dwstatic.com/lol/1601/317240712104/1453285656991.jpg",
    "http://img2.dwstatic.com/lol/1601/317240712104/1453285664288.jpg"
  ],
  "tags": ["magic", "shooter"],
  "icons": [
    "http://img.dwstatic.com/lol/1310/246295394773/1382341114833.png",
    "http://img4.dwstatic.com/lol/1512/315320556654/1451366964489.jpg",
    "http://img5.dwstatic.com/lol/1601/317240712104/1453285557655.jpg",
    "http://img2.dwstatic.com/lol/1601/317240712104/1453285565958.jpg",
    "http://img.dwstatic.com/lol/1601/317240712104/1453285572965.jpg",
    "http://img.dwstatic.com/lol/1601/317240712104/1453285579908.jpg",
    "http://img.dwstatic.com/lol/1601/317240712104/1453285586550.jpg",
    "http://img4.dwstatic.com/lol/1601/317240712104/1453285592508.jpg",
    "http://img2.dwstatic.com/lol/1601/317240712104/1453285599012.jpg"
  ],
  "ability": {
    "life": "30",
    "physical": "50",
    "magic": "70",
    "difficulty": "40"
  },
  "story": "Teemo There is also a hidden passive skill, which is to grow a global taunt face. Every Regiment Battle is bound to be set on fire by enemy tanks and assassin heroes. Your job is to use mushroom kites to attack every one of your people, keep alive and kill people if possible."
}

Write data
Request address: https://autumnfish.cn/api/cq/add
Request method: post
Request parameters: heroName,heroSkill,skillName

Parameter name	Parameter description	remarks
heroName	Hero name	Cannot be empty
heroIcon	Skill picture	Cannot be empty
skillName	Skill name	Cannot be empty

Response content: JSON

{
    "msg": "Added successfully",
    "code": 201,
    "info": {
        "heroIcon": "https://autumnfish.cn/api/cq/static/5f89c6f2c695d7126d2768bda47fd7e9",
        "heroName": "Super dance king",
        "skillName": "dance"
    }
}

Original article address: https://gitee.com/Li0101/AjaxApi/blob/master/README.md