eclipse中前后端交互方式

一、前端

1.get,post两种请求

//get方式（在url中进行传参）
ajax({
    url:"login?account="+account+"&password="+password,
    type:"get",
    async:true,
    success:function(data){
                
    },
    error:function(){
        alert("请联系管理员")
    }
})
//post方式（在data中进行传参）
ajax({
    url:"login"",
    type:"post",
    async:true,
    data:{
        account:admin,
        password:123456   
    }
    success:function(data){
                
    },
    error:function(){
        alert("请联系管理员")
    }
})

能发起get请求方式：（浏览器的地址栏，a标签，jquery+ajax，form） 应用：查询数据

能发起post请求方式：（jquery+ajax，form） 应用：删除添加修改数据

2.点击事件的触发

//在body中class="login"的属性
$(".login").on("click",function(){ 
    
})
//在ajax中设置的一个按钮属性，class="delete"
$(".content").on("click",".delete",function(){

})

3.设置按钮的index属性(动态获取)

//设置修改按钮的index属性
<input type='button' value='修改'  class='selectByID' index='"+temp[i].brandID+"'>
//获取修改按钮的index值，并设置确定修改按钮的index属性
<input type="button" class="update" value="确定修改">
$(".content").on("click",".selectByID",function(){
	var brandID=$(this).attr("index")
	$(".update").attr("index",brandID)
})
//获取确定修改按钮的index值
$(".update").on("click",function(){
	var brandID=$(this).attr("index")
})

4.前端获取文本中的数据

//获取class="account"的文本值
var account=$(".account").val()

5.跳转的方式

//在ajax中进行跳转

location.href="login.html"//跳转到前端页面 
location.href="login?account=root&password=123456"//跳转到后端，带参数

//在a标签中进行跳转

<a href="login">跳转</a>//跳转到后端，不带参数 
<a href="login?account=root&password=123456">跳转</a>//跳转到后端，带参数

二、后端

1.解决中文乱码问题

request.setCharacterEncoding("utf-8"); 
response.setCharacterEncoding("utf-8");

2.设置后端给前端的数据为json格式

response.setContentType("text/json;charset-utf-8");

3.后端获取前端数据

String account=request.getParameter("account");

4.后端往前端传信息数据（给前端响应数据）

//返回前端的是字符串，需要设置中文乱码(1)
response.getWriter().write("登陆失败");
//返回前端的是json格式，data，需要设置数据为json格式(2)
response.getWriter().write(data);