html 和jsp 引入jquery_不用jsp怎么实现前后端交互？给萌新后端的ajax教程(1)
眾所周知jsp是已經入土的技術，雖然仍有不少老項目在用，但已經不值得花時間學習了，當然了解一下也是可以的。如果你是一位萌新后端，不想了解jsp，或者想做一個前后端分離的項目，想在純html網頁上實現前后端交互，不妨看看這篇文章。
一、Q/A
1.什么是ajax
請自行谷歌/百度，反正我復制粘貼在這你也不會看。
2.ajax可以做什么
可以實現不刷新整個網頁來更新網頁的數據，也可以直接拿來做前后端交互。
3.這里講的是是原生ajax實現嗎？后端是php還是Java？
不是，是jQuery的ajax實現，后端是Java的SpringMVC框架。
三、前置知識要求
1.SpringMVC的基本了解
2.認識基礎html的寫法以及了解基本標簽的作用
3.了解maven的使用
四、環境準備
1.IDEA2019.3.1，JDK13
2.SpringMVC基本環境
注意xml配置文件中的攔截器設置，不要攔截html文件和js文件，如圖
<!-- 設置靜態資源不過濾 --> <mvc:resources location="/css/" mapping="/css/**" /> <mvc:resources location="/images/" mapping="/images/**" /> <mvc:resources location="/js/" mapping="/js/**" /> <mvc:resources location="/html/" mapping="/html/**" />3.建立一個前端頁面test.html 引入jQuery文件，可以去jQuery官網下載。
如圖，src里寫jQuery文件的路徑
<head><meta charset="UTF-8"><title>Title</title><script src="../js/jquery.min.js"></script> </head>如果不想每次打開tomcat都手動輸入地址跳轉到test.html，可以在web.xml里寫上
<welcome-file-list><welcome-file>test.html</welcome-file> </welcome-file-list>給一些缺乏前端知識的萌新后端講一些注意的點：
(1)關于jquery.js和jquery.min.js的區別：官網可以下載jquery.js和jquery.min.js兩個文件的內容是一樣的，不要認為帶min的是簡略版。帶min的js文件體積較小，因為壓縮了文件里多余的空格和換行符，但所有內容擠在一起閱讀源碼困難，當然作為初學者我們不看源碼因此下哪個都是可以的
(2)這個引用jquery包的<script>標簽放在body中也可以，但如果放在body中的話應該放在你寫的代碼的<script>標簽的最上面，以免需要用到函數時還沒有加載這個包。
(3)此外，引入jquery包的<script>標簽內部不要寫你的js程序，在內部寫你的語句會失效，請另開一個<script>標簽
4.引入解析json的maven依賴，不引入會報415錯誤，可以自己改一下版本。
<!--json--> <dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.0</version> </dependency> <dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>2.9.0</version> </dependency> <dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId><version>2.9.0</version>引入后記得在maven窗口點一下刷新，否則包引入不進去
五、開始教你寫ajax
1.首先在body里寫一個文本框和按鈕
<input id="txt" type="text"> <button id="btn" onclick="testajax()">點擊我</button>意思是按鈕被點擊時執行testajax()函數
2.接下來在<script>標簽內寫一個叫testajax的函數
function testajax(){var text=document.getElementById("txt").value;$.ajax({type:"post",url:"test",contentType:"application/json;charset=UTF-8",data:JSON.stringify({"k":"123","heihei":text }),//dataType:"json",success:function(data){alert("執行成功！")}}); }3.講一下這段代碼，第一句var text=document.getElementById("txt").value;的意思是定義一個叫text的變量，JavaScript中的變量是不分類型的，一律用var定義，text的值等于什么呢？
docment.getElementById(“xxx”)是固定寫法，意思是得到某個id為xxx的元素，由于輸入框的id是txt，因此我們就獲得了輸入框?！?value”的意思是這個輸入框里的內容，也就是你給輸入框輸入的東西。當然你也可以用jQuery里的選擇器，直接寫$(“#txt”).value，效果是等同的。
然后我們向下看，$.ajax是固定寫法，$是jQuery的縮寫，因此寫jQuery.ajax效果是一樣的，意思是要用ajax了，注意寫法，里面的值是被包裹在$.ajax({…});里面的，不能忘記最后的”;”標點符號。
$ajax({…});里面包裹的是各種設置,設置之間用逗號隔開，最后一個屬性之后不需要加逗號。
type的意思是用什么方式發送數據，此處我們使用post方式；
url是發送/接收ajax請求的路徑，一會兒我們會在controller里用@RequestMapping設置該路徑對應的方法。
contentType是你要給后端發送什么格式的請求，這里我們設置json，并且設定編碼為UTF-8.
data是你要發送請求的內容，用鍵值對（key-value）的方式表示。不同鍵值對之間用逗號隔開，同理最后一個鍵值對后面不需要加逗號。因為我們需要發送json，因此我們用JSON.stringfy()函數把里面的內容變成json字符串。我們發送的第一對鍵值對，key是”k”，value是”123”，我們發送的第二對鍵值對，key是”heihei”，值是text。注意這里的text沒有被雙引號包裹，原因是這是我們之前定義的變量——輸入框中的內容。
datatype是ajax從后端接收的數據的類型，這里我們設置為json，但是這里我們先注釋掉，原因后續再講
succes里是ajax請求成功后要執行的函數，括號里的變量起什么名字都可以，我起名為data，data里是從后端返回的json.
4.由于我們返回了兩對鍵值對，我們把它封裝成一個對象。
在domain層創建TestDomain.java這個類，里面剛好是我們的兩個鍵值對的鍵：
public class TestDomain {private String k;private String heihei; 省略get/set方法…… 省略toString方法…… }5.然后我們在controller層來寫一個TestController.java這個類，如下
@Controller public class TestController { @RequestMapping("/test")public @ResponseBody String testAJAX(@RequestBody TestDomain t){System.out.println(t.getHeihei());System.out.println(t.getK());System.out.println(t);return "ok";} }@Controller和@RequestMapping注解不作解釋。
關于@ResponseBody，是為了把我們返回的數據轉化為json，同時如果你不加這個注解，return “ok”會被認為是跳轉到ok這個路徑，因此使用了ajax后return就失去了重定向的功能。
@RequstBody用來把我們接收到的json封裝到TestDomain類中。
可是既然我們現在不需要返回數據，能不能把String改成void呢？答案是不可以的，ajax需要發送請求和接收請求兩個過程才可以視為請求成功，如果你改成void不返回任何東西給ajax是會報錯的。當然String改成int之類的隨便什么都是可以的。
return里可以隨便返回一個字符串，不一定得是“ok”;
6.運行項目
點擊按鈕，我們可以看到它彈出窗口并且正確輸出了
沒有正確輸出的小伙伴請檢查一下自己的代碼，右鍵瀏覽器窗口，點擊檢查可以看看控制臺報了什么錯
7.測試一下向前端傳值
我們把success函數里的alert(“執行成功”);改成alert(data);看看結果如何，注意不要加引號
再運行項目，點擊按鈕，可以看見彈窗變成了
說明我們傳值成功
四、一些報錯
1.“‘$’is undefined”，這是引入jquery的js文件失敗導致的，一些項目的路徑比較詭異，自己多研究一下;
2.“參數是必選項”，這是指定了要發送json類型的數據給后端，但是沒有通過JSON.stringfy（）進行轉換導致的；
3.415錯誤，常見原因：沒有引入json的解析依賴，或者沒有設置contentType為“application/json”
4.找不到路徑，常見原因：url路徑寫的不對，比如路徑前面加了“/”之類的
總結
以上是生活随笔為你收集整理的html 和jsp 引入jquery_不用jsp怎么实现前后端交互？给萌新后端的ajax教程(1)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql not exists无效_分
- 下一篇： layui父页面调用子页面的渲染_lay