當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

[JAVA EE]ajax 方式提交数据

發(fā)布時間：2023/11/27 生活经验 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 [JAVA EE]ajax 方式提交数据小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前端界面：Form表單
前端數(shù)據(jù)提交：使用 ajax 方式 ( 基于jquery )

后臺代碼：
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é)號</label><div class="col-sm-5"><input type="text" class="form-control" id="id" placeholder="請輸入學(xué)號"></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="請輸入姓名"></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", //請求的路徑data: param, //傳給后臺的數(shù)據(jù)（一般使用json格式）type: "post", //post請求dataType: "json", //后臺返回?cái)?shù)據(jù)的類型success: function (data) { //data為后臺返回的結(jié)果console.log(data.id);console.log(data.name);}});});});
</script>
</body>
</html>

Ajax介紹

Ajax就是JS這個語言和服務(wù)端交互的手段。
Ajax 全名 async javascript and XML(異步JavaScript和XML)
是前后臺交互的能?，也就是我們客戶端給服務(wù)端發(fā)送消息的?具，以及接受響應(yīng)的?具
Ajax 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù)，在不重新加載整個頁面的情況下。
是?個默認(rèn)異步執(zhí)?機(jī)制的功能，Ajax分為同步（async = false）和異步（async = true）

什么是同步請求？(false)

同步請求是指當(dāng)前發(fā)出請求后，瀏覽器什么都不能做。
必須得等到請求完成返回?cái)?shù)據(jù)之后，才會執(zhí)行后續(xù)的代碼。
相當(dāng)于生活中的排隊(duì)，必須等待前一個人完成自己的事物，后一個人才能接著辦。
也就是說，當(dāng)JS代碼加載到當(dāng)前AJAX的時候會把頁面里所有的代碼停止加載，頁面處于一個假死狀態(tài)。
當(dāng)這個AJAX執(zhí)行完畢后才會繼續(xù)運(yùn)行其他代碼頁面解除假死狀態(tài)。

什么是異步請求？(默認(rèn):true)

默認(rèn)異步：異步請求就當(dāng)發(fā)出請求的同時，瀏覽器可以繼續(xù)做任何事，
Ajax發(fā)送請求并不會影響頁面的加載與用戶的操作，相當(dāng)于是在兩條線上，各走各的，互不影響。
一般默認(rèn)值為true，異步。異步請求可以完全不影響用戶的體驗(yàn)效果，
無論請求的時間長或者短，用戶都在專心的操作頁面的其他內(nèi)容，并不會有等待的感覺。

Jquery Ajax 支持哪些數(shù)據(jù)類型

xml：返回xml文檔，可用于jQuery處理
html：返回純文本html信息，包含的script標(biāo)簽會插入dom執(zhí)行
script：返回純文本JavaScript代碼，不會自動緩存結(jié)果
json：返回json數(shù)據(jù)
jsonp：json格式。使用json形式調(diào)用函數(shù)
text：純文本字符串

總結(jié)

以上是生活随笔為你收集整理的[JAVA EE]ajax 方式提交数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。