文章詳情頁(yè)

前后端ajax和json數(shù)據(jù)交換方式

瀏覽：3日期：2022-06-14 13:39:26

目錄前后端ajax和json數(shù)據(jù)交換下面通過(guò)一個(gè)小案例來(lái)講解編寫一個(gè)實(shí)體類User第一個(gè)案例寫一個(gè)UserController控制器第二個(gè)案例寫loginController控制器前端頁(yè)面login.jsp測(cè)試如下總結(jié)前后端ajax和json數(shù)據(jù)交換

控制層返回json字符串?dāng)?shù)據(jù)給前端，前端通過(guò)ajax處理將數(shù)據(jù)展示給用戶。

下面通過(guò)一個(gè)小案例來(lái)講解

首先需要搭建springMVC框架環(huán)境，可以參考為之前的文章

編寫一個(gè)實(shí)體類Userpackage com.pojo;public class User { private String username; private String password; private String sex; @Override public String toString() {return 'User{' +'username='' + username + ''' +', password='' + password + ''' +', sex='' + sex + ''' +'}'; } public User() { } public String getUsername() {return username; } public void setUsername(String username) {this.username = username; } public String getPassword() {return password; } public void setPassword(String password) {this.password = password; } public String getSex() {return sex; } public void setSex(String sex) {this.sex = sex; } public User(String username, String password, String sex) {this.username = username;this.password = password;this.sex = sex; }}第一個(gè)案例

controller返回一個(gè)學(xué)生信息數(shù)組，前端獲取并打印到界面

寫一個(gè)UserController控制器package com.controller;import com.pojo.User;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;import java.util.List;//該注解相當(dāng)于@responseBody+@Controller@RestControllerpublic class UserController { //返回學(xué)生信息的集合 @RequestMapping('/user') public List<User> getUser(){List<User> users = new ArrayList<>();User user = new User('小明','123456','男');User user1 = new User('小紅','123456','女');User user2 = new User('小白','123456','男');User user3 = new User('小李','123456','女');users.add(user);users.add(user1);users.add(user2);users.add(user3);return users; }}

index.jsp頁(yè)面，注意jquery的版本不能太低，版本低的用不了$.post方法

<%@ page contentType='text/html;charset=UTF-8' language='java' %><html><head> <title>Ajax</title> <%-- 注意路徑問(wèn)題,導(dǎo)入jquery--%> <script src='https://www.jb51.net/program/${pageContext.request.contextPath}/static/js/jquery-3.6.0.js'></script></head><body><script type='text/javascript'> $(function () {//獲取學(xué)生數(shù)據(jù)$('#btn').click(function () { //post請(qǐng)求處理后端傳來(lái)的數(shù)據(jù) //data封裝了服務(wù)器返回的數(shù)據(jù) $.post('${pageContext.request.contextPath}/user',function (data) {console.log(data)var html=''for (var i=0;i<data.length;i++){ html+='<tr>'+'<td>'+data[i].username+'</td>'+'<td>'+data[i].password+'</td>'+'<td>'+data[i].sex+'</td>'+'</tr>'}//數(shù)據(jù)顯示在頁(yè)面上$('#context').html(html) })}) })</script><input type='button' value='獲取學(xué)生數(shù)據(jù)' ><table border='1' cellspacing='0' align='center'> <tr><td>姓名</td><td>密碼</td><td>性別</td> </tr>  <tbody id='context'> </tbody></table></body></html>

點(diǎn)擊獲取數(shù)據(jù)，則會(huì)打印后臺(tái)傳來(lái)的數(shù)據(jù)

第二個(gè)案例

模擬登錄，運(yùn)用onblur焦點(diǎn)失去事件，當(dāng)我們輸入完一個(gè)值，ajax會(huì)幫我們驗(yàn)證用戶名，密碼是否正確

寫loginController控制器package com.controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;@RestControllerpublic class loginController { @RequestMapping('/login') public String login(String username,String password){String message='';//要先判斷用戶名是否為空if(username!=null){ //這里用戶名寫死為admin if ('admin'.equals(username)) {message='成功'; }else {message='用戶名錯(cuò)誤'; }}//先判斷密碼是否為空if(password!=null){ //這里密碼寫死為123456 if(password.equals('123456')){message='成功'; }else {message='密碼錯(cuò)誤'; }}//返回message到前端return message; }}前端頁(yè)面login.jsp<%-- Created by IntelliJ IDEA. User: 21781 Date: 2021/12/31 Time: 19:07 To change this template use File | Settings | File Templates.--%><%@ page contentType='text/html;charset=UTF-8' language='java' %><html><head> <title>Title</title> <script src='https://www.jb51.net/program/${pageContext.request.contextPath}/static/js/jquery-3.6.0.js'></script> <script>//驗(yàn)證用戶名是否正確function a1() { //{'username':$('#username').val()}為傳入后端的參數(shù)值 $.post('${pageContext.request.contextPath}/login',{'username':$('#username').val()},function (data) {if (data.toString()=='成功'){//表示用戶名正確 $('#name').css('color','green')}else { $('#name').css('color','red')}$('#name').html(data) })}//驗(yàn)證密碼是否正確function a2() { $.post('${pageContext.request.contextPath}/login',{'password':$('#password').val()},function (data) {if (data.toString()=='成功'){//表示用戶名正確 $('#ped').css('color','green')}else { $('#ped').css('color','red')}$('#ped').html(data) })} </script></head><body><p align='center'>  用戶名：<input type='text' onblur='a1()'>  <span id='name'></span></p><p align='center'> 密碼：<input type='text' onblur='a2()'>  <span id='ped'></span></p></body></html>測(cè)試如下

當(dāng)我們輸入用戶名和密碼后，會(huì)進(jìn)行相應(yīng)判斷

這樣就模擬完成json和ajax數(shù)據(jù)交互。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。

Ajax

上一條：AJAX POST數(shù)據(jù)中有特殊符號(hào)(轉(zhuǎn)義字符)導(dǎo)致數(shù)據(jù)丟失的解決方法下一條：前端ajax請(qǐng)求+后端java實(shí)現(xiàn)的下載zip壓縮包功能示例

排行榜

					
					Python 圖片處理庫(kù)exifread詳解
PHP 工程師面試的四個(gè)環(huán)節(jié)
詳解瀏覽器的緩存機(jī)制
Android Studio中一套代碼多渠道打包的實(shí)現(xiàn)方法
springboot項(xiàng)目整合mybatis并配置mybatis中間件的實(shí)現(xiàn)
Java實(shí)現(xiàn)簡(jiǎn)單LRU緩存機(jī)制的方法
JS實(shí)現(xiàn)炫酷輪播圖
Lore Article.PHP SQL注入漏洞
JavaScript forEach中return失效問(wèn)題解決方案
Python Opencv中用compareHist函數(shù)進(jìn)行直方圖比較對(duì)比圖片
使用python編寫一個(gè)語(yǔ)音朗讀鬧鐘功能的示例代碼
				