AJAX前后端交互

（1）URL传值和restful的区别和规范

URL传值

fetch("http://localhost:8080/books?id=123", {
     method: "get",
})

app.get('/books', (req, res) => {
    res.end('url传递参数' + req.query.id)
})

restful传值

fetch("http://localhost:8080/books/123", {
        method: "get",
})

app.get('/books/:id', (req, res) => {
    res.end('Restful传递参数' + req.params.id)
})

（2）GET、POST、PUT、DELETE、OPTION请求的区别

GET

get请求是用来获取数据的，只是用来查询数据，不对服务器的数据做任何的修改，新增，删除等操作。

在这里我们认为get请求是安全的，以及幂等的。安全就是指不影响服务器的数据，幂等是指同一个请求发送多次返回的结果应该相同。

POST

post请求一般是对服务器的数据做改变，常用来数据的提交，新增操作。

PUT

put请求与post一样都会改变服务器的数据，但是put的侧重点在于对于数据的修改操作，但是post侧重于对于数据的增加。

DELETE

delete请求用来删除服务器的资源。

OPTIONS

options请求属于浏览器的预检请求，查看服务器是否接受请求，预检通过后，浏览器才会去发get，post，put，delete等请求。至于什么情况下浏览器会发预检请求，浏览器会会将请求分为两类，简单请求与非简单请求，非简单请求会产生预检options请求。
 

（3）如何携带数据使用AXIOS、JQUERY发送GET、POST、PUT、DELETE请求

AXIOS GET传参

app.get('/axios', (req, res) => {
    res.send('axios GET传递参数:' + req.query.id)
})

//查询字符串走的路由
axios.get('http://localhost:8080/axios?id=1000').then((response) => {
    console.log(response)
})

AXIOS POST传参

axios.post('http://localhost:8080/axios',{
    id: 3333,
    uname: 'hiroshi'
}).then((result) => {
    console.log(result.data)
})

//查询字符串走的路由
app.post('/axios',(req,res)=>{
    console.log('req.body:',JSON.stringify(req.body))
    res.send('axios POST传递参数：' + 'uname：' + req.body.uname + '---' + 'id：' + req.body.id)
})

 AXIOS PUT传参

axios.put('http://localhost:8080/axios/7',{
    uname: 'hiroshi',
    num: 1001
}).then((result) => {
    console.log(result.data)
})

//查询字符串走的路由
app.put('/axios/:id',(req,res)=>{
    console.log('req.body:', req.body)
    console.log('id:', req.params.id)
    res.send('axios PUT传递参数：' + req.body.uname + '--' + req.body.num + '--' + req.params.id)
})

AXIOS DELETE传参

axios.delete('http://localhost:8080/axios?id=1234&name=dean').then((result)=>{
    console.log(result.data)
})

//查询字符串走的路由
app.delete('/axios',(req,res)=>{
    console.log(JSON.stringify(req.query))
    res.send('axios DELETE传递参数：' + JSON.stringify(req.query))
})

 JQUERY发送GET、POST、PUT、DELETE请求

$.ajax({
            url: "/api/book/",
            type: "GET",//POST、PUT、DELETE
            beforeSend: function (xhr) { 
                xhr.setRequestHeader("begin", 1);//你要传的参数
                xhr.setRequestHeader("length", 10);
                xhr.setRequestHeader("map", null);
            },
            success: function (data) {
                alert(data[0].bookname);
            },
            error: function (xhr, textStatus, errorThrow) {
                alert("error:"+xhr.readyState);
            }
        });

（4）如何使用formdata传输

function jump() {
			var formData = new FormData();
			formData.append("file", $("#avatar_file")[0].files[0]);//文件传输
			formData.append("usernum", $('#usernum').val());
			formData.append("username", $('#username').val());
			formData.append("password", $('#password').val());
			formData.append("password1", $('#password1').val());

    $.ajax({
				// 默认开启异步,关掉设为false
				type: 'post', // 发送类型
				url: 'register.php',
				data: formData,
				contentType: false,
				processData: false,

				success: function(e) {
					if (e == '1') {
						// document.write('注册成功，请登录');
						window.location.href = "login.html";
					} else {
						alert(e);
					}
				}
			});
}

（5）如何使用json格式传输

var a = new Array(); 
a['name']="333"; 
a['password']="54dfdgf";
//JSON数据形式：
var a='{"username":admin,"password":admin}';
var data='userinfo='+a;
$.ajax({ 
	type:"POST", 
	url:"login.php", 
	data:data, 
	success:function(data){ 
		console.log(data); 
	}
});

（6）如何使用ajax上传图片

<div class="form-group">
　　<label class="col-sm-2 control-label">图片</label>
　　<div class="col-sm-4">
　　　　<input type="hidden" name="image" id="img_url" value="<?php echo $rows['image']; ?>">
　　　　<div id="file">
　　　　　　<span>更新图片</span>
　　　　　　<input type="file" onchange="showImg(this)" id="uploadForm">
　　　　</div>
　　</div>
　　<div class="col-sm-2">
　　　　<div class="box">
　　　　<section id="t_img">
　　　　　　<img src="<?php echo $rows['image']; ?>">
　　　　</section>
　　</div>
　　</div>
</div>

function doUpload(){
            if(img_l == ''){

            }else{
                var formData = new FormData($( "#formxx" )[0]);
                formData.append('image', img_l);
                formData.append('id', $('#p_id').val());
                $.ajax({
                    url: 'index.php?m=admin&c=consult&f=ajax_up_img' ,
                    type: 'post',
                    data: formData,
                    dataType: "json",
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success:function(data,status){
                        $('#img_url').attr('value',data['img_url']);
                        //alert(data['img_url']);
                    },
                    error:function (returndata){
                        alert(returndata);
                    }
                });
            }
            return true;
        }