最近开发中，遇到框架不知名的ajax调用异常，决定用jQuery的ajax来替换。记录一下本地工程引入jQuery的ajax方法的测试效果。
一、ssm配置MySQL修改
1、pom.xml文件中添加配置，引入依赖jar包
<!-- mysql 数据库驱动-->
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.18</version>
</dependency>2、修改数据库信息配置（原本使用oracle配置）
jdbc.jdbcUrl=jdbc:oracle:thin:@localhost:1521:orcl
jdbc.jdbcUrl5mysql=jdbc:mysql://localhost:3306/ry_vue
jdbc.driverClass=oracle.jdbc.driver.OracleDriver
jdbc.driverClass5mysql=com.mysql.jdbc.Driver
jdbc.user=user
jdbc.user5mysql=root
jdbc.password=user123
jdbc.password5mysql=password 3、修改spring配置文件引用的变量名称
<!-- MySQL 数据源 -->
<bean id="pooledDataSource"
class="com.mchange.v2.c3p0.ComboPooledDataSource">
<!-- 基本属性 url、user、password -->
<property name="jdbcUrl" value="${jdbc.jdbcUrl5mysql}" />
<property name="driverClass" value="${jdbc.driverClass5mysql}" />
<property name="user" value="${jdbc.user5mysql}" />
<property name="password" value="${jdbc.password5mysql}" />
</bean>二、后台controller方法编写
@ResponseBody
@RequestMapping(value="/ajaxquerydata01",produces="text/html;charset=UTF-8")
public String ajaxquerydata01 (String username01){
//由于JSON.parse()限制比较严格，只支持标准的JSON格式，key/value值必须加双引号。
String returnJsonData = "{\"flag\":ajaxquerydata01,\"msg01\":\""+username01+"\",\"msg02\":\"JSON.parse()限制比较严格，只支持标准的JSON格式，key/value值必须加双引号。\"}";
return returnJsonData;
}1、传参
通过简单的数据类型来接收参数值，即controller中方法的参数名直接对应前台URL传入的参数名称，仅限int，string，double，float，etc 这些简单的数据类型。
2、直接返回json格式数据，需要使用@ResponseBody注解
3、解决中文返回前台乱码的问题，需要在@RequestMapping中，
添加produces="text/html;charset=UTF-8"
由于JSON.parse()限制比较严格，只支持标准的JSON格式，返回前台的json字符串key/value值必须加双引号。
三、前台jsp页面ajax方法编写
1、引入jQuery
<script type="text/javascript" src="static/jquery/jquery-2.1.1.js"></script>2、编写ajax调用方法
<script type="text/javascript" src="static/jquery/jquery-2.1.1.js"></script>
<script type="text/javascript" >
function ajaxquery01() {
$.ajax({
type:"get",
url:"http://localhost:8080/ssmcrud22/urlpath01/ajaxquerydata01",
data:{username01:"user01"},
datatype:"json",
//contenttype:"application/json; charset=utf-8",
success:function (redata) {
// alert(redata);
var rejson = JSON.parse(redata);
// alert(rejson.flag);
alert("hello my dear "+rejson.msg01+","+rejson.msg02);
},
error:function () {
alert("error ajaxquery01");
}
});
}
/*调试的时候可以把方法放在页面加载时调用
$(document).ready(function(e){
$.ajax({
type:"get",
url:"http://localhost:8080/ssmcrud22/urlpath01/ajaxquerydata01",
date:{username01:"inputusername"},
datatype:"json",
success:function (redata) {
alert(redata);
var rejson = JSON.parse(redata);
//var rejson = JSON.parse("{\"flag\":1,\"msg01\":null}");
alert(rejson.flag);
},
error:function () {
alert("error onload");
}
});
});*/
</script>四、chrome调试
1、调试页面异常
2、修改返回json格式后，执行正常
扩展：
jQuery、json基本语法与用法
参考资料：
1、MySQL配置
https://blog.csdn.net/qq_42249896/article/details/92646531
2、springMVC controller的传参（SpringMVC中的Controller如何获取请求中的参数）
https://blog.csdn.net/a909301740/article/details/80411114
3、jQuery的ajax方法
https://blog.csdn.net/weixin_40264344/article/details/84105099
4、JSON.parse()报错原因及处理
https://www.baidu.com/link?url=Kn-ZsLdUkSz5shjh-p883wdNFePAob3WYI0bWoqSgeL-qWVcNcw0p5_ZoXjN6WVxTa9W1Y9mkAX18YlL4PoB8_&wd=&eqid=fa33f8f400085b36000000055e6cfba3
5、json解析中文乱码处理
https://blog.csdn.net/dianxu0804/article/details/101241838
