javaWeb前后端传递数据交互的两种⽅式
从前端向后台传递参数⽅法
⼀、通过表单传递参数
1.前端部分，在前端jsp页⾯设置form表单，确定需要传递的参数让⽤户输⼊，通过点击按钮后submit()提交到后台，
<form id="loginForm" method="post" action="/emp?method=login">
⽤户名: <input type="text" name="ename" value="⼩乔" id="ename"><span id="nameMsg"></span> <br>
密   码: <input type="password" name="pwd" value="123456" id="pwd"> <br>
<button id="sub"  type="submit">登录</button>
<a href="reg.jsp">注册</a>
</form>
<form id="loginForm" method="post" action="/emp?method=reg">
⽤户名: <input type="text" name="ename" id="ename"><span id="nameMsg"></span> <br>
密   码: <input type="password" name="pwd" id="pwd"> <br>
性   别: <input type="radio" name="esex" id="esex" value="男">男 <input type="radio" name="esex" value="⼥">⼥<br>
⼯   资: <input type="number" name="salary" id="salary"> <br>
编   号: <input type="number" name="dno" id="dno"> <br>
出⽣⽇期: <input type="Date" name="borndate" id="borndate"> <br>
<button id="sub"  type="submit">确定</button>
</form>
2.后台通过Parameter()，获取form表单的数据
public String login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String ename = Parameter("ename");
String pwd = Parameter("pwd");
System.out.println(ename + pwd);
EmpDao mapper = Mapper(EmpDao.class);
Emp login = mapper.login(ename, pwd);
if (login != null) {
return showAll(request, response);
}
return Const.REDIRECT + "/login.jsp";
}
⼆、使⽤ajax传递数据（有post和get写法）
1、在js中直接使⽤ajax作为异步请求
<script type="text/javascript">
$(function() {
//1.验证⽤户名是否存在
$("#ename").change(function () {
//请求的action            //传递的数据
$.get("/emp?method=checkName", "ename=" + this.value, function (data) {
//成功时返回的数据
if (data == 1) {
$("#nameMsg").html("⽤户名存在").css("color", "red");
} else {
$("#nameMsg").html("");
}
})
});
})
</script>
2.后台对前端请求的反应，接收数据
web后端是指什么String ename= Parameter("ename");
public String reg(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, ParseException {        EmpDao mapper1 = Mapper(EmpDao.class);
String ename = Parameter("ename");
String esex = Parameter("esex");
Double salary = Double.Parameter("salary"));
Integer dno = Integer.Parameter("dno"));
String pwd = Parameter("pwd");
Date borndate = DateUtil.Parameter("borndate"));
Emp emp = new Emp(ename, esex, salary, pwd, dno, borndate);
int i = Emp(emp);
MyBatisUtilsmit();
System.out.println(i);
if (i > 0) {
System.out.println("添加成功");
return showAll(request, response);
} else {
return Const.REDIRECT + "reg.jsp";
}
}
3.后台对前端发送请求的反应，将Java数据转换为json数据
public String selectEmpByEno(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        String eno = Parameter("eno");
EmpDao mapper1 = Mapper(EmpDao.class);
Emp emp = mapper1.selectEmpByEno(eno);
if (emp!=null) {
ObjectMapper om = new ObjectMapper();
String string = om.writeValueAsString(emp);
}
return null;
}
4.再看看前端接收到后端返回的数据是如何处理的
<script>
/* 修改emp数据 */
function updateEmp(eno) {
/
/1 获取对应的数据，修改是要显⽰源数据⽅便⽤户进⾏修改
//使⽤eno主键获取⽤户的数据
$.post("/emp?method=selectEmpByEno&eno="+eno,function (data) {
if (data=="null") {
alert("没有需要修改的数据，请重试");
return;
}else{
//有⽤户的数据，填充数据到form表单当中
var emp = JSON.parse(data);
//获取表单项使⽤val()进⾏数据填充，把从服务器获取的数据赋值给表单                $("input[name='ename']").ame);
//先清除原有的默认选择
$("input[name='esex']").removeAttr("checked");
if(emp.esex=="⼥"){
$("input[name='esex']").eq(1).prop("checked",true);
}else{
$("input[name='esex']").eq(0).prop("checked",true);
}
$("input[name='salary']").val(emp.salary);
$("input[name='pwd']").val(emp.pwd);
$("input[name='dno']").val(emp.dno);
$("input[name='borndate']").val(emp.borndate);
$("input[name='eno']").);
/
/显⽰表格
$("#empDiv").css("display", "block");
}
});
}
</script>
<script type="text/javascript">
$(function() {
//1.验证⽤户名是否存在
$("#ename").change(function () {
$.get("/emp?method=checkName", "ename=" + this.value, function (data) {                if (data == 0) {
$("#nameMsg").html("⽤户名不存在").css("color", "red");
} else {
$("#nameMsg").html("");
}
})
});
})
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。