1.在html文件中添加表单,不需要action和method属性
<form action="" id="formID">
<input type="text" id="iname" name="iname">
<button type="submit">提交</button>
</form>
2.在项目中添加框架文件(找不到的可加QQ群:666347476获取)
3.在html文件中</body>之前添加JavaScript代码,引入框架时注意路径
需要修改:表单的id属性值#formID;提交的方式:type(post或get);提交的接口url;
返回值res直接打印为{"code":1}
console.log(res.code)输出code的值1
//引入框架文件,注意路径
<script src="js/jquery.js"></script>
<script src="./layui/layui.js" charset="utf-8"></script>
<script>
$('#formID').on('submit', function() {
//将表单数据转为字符串类型的数据
var params = $('#formID').serialize();
$.ajax({
type:"post",
url:"addInfo",//普通form标签的提交数据的接口action值,前面不加“/”
data:params,//这种方式不能上传图片等文件
dataType:"json",//返回数据的类型为json
// 指定参数的格式类型
contentType: 'application/x-www-form-urlencoded',
success:function(res){
console.log(res);
},
error:function(xhr){
console.log(xhr);
}
})
return false;//默认阻止提交数据跳转
})
</script>
5.后台接收数据,springboot框架,controller中
@PostMapping("addInfo")//action接口值,ajax中的url值,注意是post还是get方法
@ResponseBody//返回字符串不跳转页面
public String addImgInfo(String iname){//iname为表单中input标签的name值
System.out.println(iname);
JSONObject jsonObject = new JSONObject();
jsonObject.put("code",1);
return jsonObject.toString();
}
如果有没写清楚的地方可以加入QQ群:666347476 交流。