[JAVA EE]ajax 方式提交数据
- 前端界面：Form表單
- 前端數(shù)據(jù)提交：使用 ajax 方式 ( 基于jquery )
后臺(tái)代碼：
TestController.java
@Controller
public class TestController {@RequestMapping("/form")public String test(){return "th/form";}@RequestMapping("/test1")@ResponseBodypublic Student test1(@RequestParam("id") Integer id, @RequestParam("name") String name) {Student s=new Student();s.setId(id);s.setName(name);return s;}}
前端代碼：（注重script部分）
form.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form</title><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal"><div class="form-group"><label for="id" class="col-sm-2 control-label">學(xué)號(hào)</label><div class="col-sm-5"><input type="text" class="form-control" id="id" placeholder="請(qǐng)輸入學(xué)號(hào)"></div></div><div class="form-group"><label for="name" class="col-sm-2 control-label">姓名</label><div class="col-sm-5"><input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入姓名"></div></div><div class="form-group"><div class="col-sm-5 col-sm-offset-2"><button id="btn" class="btn btn-default" type="button">提交</button></div></div>
</form>
<script>$(document).ready(function () {$('#btn').click(function (e) {var param = {"id": $('#id').val(),"name": $('#name').val()};$.ajax({url: "/test1", //請(qǐng)求的路徑data: param, //傳給后臺(tái)的數(shù)據(jù)（一般使用json格式）type: "post", //post請(qǐng)求dataType: "json", //后臺(tái)返回?cái)?shù)據(jù)的類型success: function (data) { //data為后臺(tái)返回的結(jié)果console.log(data.id);console.log(data.name);}});});});
</script>
</body>
</html>
Ajax介紹
- Ajax就是JS這個(gè)語(yǔ)言和服務(wù)端交互的手段。
- Ajax 全名 async javascript and XML(異步JavaScript和XML)
- 是前后臺(tái)交互的能?，也就是我們客戶端給服務(wù)端發(fā)送消息的?具，以及接受響應(yīng)的?具
- Ajax 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)的藝術(shù)，在不重新加載整個(gè)頁(yè)面的情況下。
- 是?個(gè)默認(rèn)異步執(zhí)?機(jī)制的功能，Ajax分為同步（async = false）和異步（async = true）
什么是同步請(qǐng)求？(false)
同步請(qǐng)求是指當(dāng)前發(fā)出請(qǐng)求后，瀏覽器什么都不能做。
必須得等到請(qǐng)求完成返回?cái)?shù)據(jù)之后，才會(huì)執(zhí)行后續(xù)的代碼。
相當(dāng)于生活中的排隊(duì)，必須等待前一個(gè)人完成自己的事物，后一個(gè)人才能接著辦。
也就是說，當(dāng)JS代碼加載到當(dāng)前AJAX的時(shí)候會(huì)把頁(yè)面里所有的代碼停止加載，頁(yè)面處于一個(gè)假死狀態(tài)。
當(dāng)這個(gè)AJAX執(zhí)行完畢后才會(huì)繼續(xù)運(yùn)行其他代碼頁(yè)面解除假死狀態(tài)。
什么是異步請(qǐng)求？(默認(rèn):true)
默認(rèn)異步：異步請(qǐng)求就當(dāng)發(fā)出請(qǐng)求的同時(shí)，瀏覽器可以繼續(xù)做任何事，
Ajax發(fā)送請(qǐng)求并不會(huì)影響頁(yè)面的加載與用戶的操作，相當(dāng)于是在兩條線上，各走各的，互不影響。
一般默認(rèn)值為true，異步。異步請(qǐng)求可以完全不影響用戶的體驗(yàn)效果，
無論請(qǐng)求的時(shí)間長(zhǎng)或者短，用戶都在專心的操作頁(yè)面的其他內(nèi)容，并不會(huì)有等待的感覺。
Jquery Ajax 支持哪些數(shù)據(jù)類型
- xml：返回xml文檔，可用于jQuery處理
- html：返回純文本html信息，包含的script標(biāo)簽會(huì)插入dom執(zhí)行
- script：返回純文本JavaScript代碼，不會(huì)自動(dòng)緩存結(jié)果
- json：返回json數(shù)據(jù)
- jsonp：json格式。使用json形式調(diào)用函數(shù)
- text：純文本字符串
總結(jié)
以上是生活随笔為你收集整理的[JAVA EE]ajax 方式提交数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 幽默微信网名
- 下一篇： 启动MySQL：net start my