ajax前后端交互示例

分手后的思念是犯贱 2024-03-26 10:59 71阅读 0赞

#### 文章目录 ####

*  一、前后端交互方法
 *   *  1、Ajax前端示例
     *   *  1.1 特点
         *  1.2 ajax同域请求示例
         *  1.3 ajax跨域请求示例
     *  2、后端示例
     *   *  2.1 controller层处理

## 一、前后端交互方法 ##

### 1、Ajax前端示例 ###

#### 1.1 特点 ####

Ajax是一种用于创建快速动态网页的网页开发技术。它可以让网页实现异步数据传输，不需要重新加载整个网页的内容。  
![在这里插入图片描述][7423c7a8acec4c20b68871850445cfec.png_pic_center]  
Ajax的核心技术是XMLHttpRequest，它可以让网页实现异步数据传输，使得网页可以在不重新加载整个网页的情况下更新部分内容。它使用JavaScript和XML技术，可以在后台与服务器进行通信，而不影响用户当前所看到的网页内容。

Ajax的优点是可以提高用户体验，减少网页的加载时间，提高网页的响应速度，减少网络带宽的使用，改善网页的安全性，并且可以支持多种浏览器。

Ajax的缺点是不支持所有的浏览器，特别是旧版的浏览器，而且需要花费更多的时间来学习和使用Ajax技术。

#### 1.2 ajax同域请求示例 ####

$.ajax({
        url:"getData.do",    //请求的url地址
        dataType:"json",   //返回格式为json
        async:true,//请求是否异步，默认为异步，这也是ajax重要特性
        data:{"id":"value"},    //参数值
        type:"GET",   //请求方式
        beforeSend:function(data){
            //请求前的处理
        },
        success:function(req){
            //请求成功时处理
        },
        complete:function(data){
            //请求完成的处理
        },
        error:function(data){
            //请求出错处理
        }
    });

#### 1.3 ajax跨域请求示例 ####

$.ajax({
    		type : "get",
    		dataType:"jsonp",
    		jsonp: "jsoncallback",
    		async: false,
    		url : "http://ip:8082/setProp.do",
    		data:{
    			//属性文件里的key
    			formData:JSON.stringify(formData)
    		},
    		success : function(data) {
    			alert(data['writeOK']);
    		},
    		error:function(data){
            //请求出错处理
        	}
    	});

### 2、后端示例 ###

#### 2.1 controller层处理 ####

@RestController
    public class TestAjaxController {
        
    	
    	@RequestMapping("/getProp")
        public void getProp(HttpServletRequest request,HttpServletResponse response) {
        
    		try {
        
    			// 跨域请求设置
    		    response.setHeader("Access-Control-Allow-Origin", "*");
    		    String callBackName = request.getParameter("jsoncallback");
    		    request.setCharacterEncoding("utf-8");
    		    response.setCharacterEncoding("utf-8");
    		    //操作业务代码
    		    
    			//System.out.println("发送前端的数据："+result);
    			String resultStr = callBackName + "(" + result.toString() + ")";
    			response.getWriter().write(resultStr);
    		} catch (IOException e) {
        
    			e.printStackTrace();
    		}
        }

[7423c7a8acec4c20b68871850445cfec.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b7e984bf014544b6b1e31377f70fcf77.png