ajax提交表单

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 交流。