ajax表单元素发送

最新推荐文章于 2020-08-02 10:12:18 发布

sanjiaowuhuan

最新推荐文章于 2020-08-02 10:12:18 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/sanjiaowuhuan/article/details/102388509

版权

teacher-note 专栏收录该内容

97 篇文章 0 订阅

订阅专栏

jquery解析表单数据的方法

<body>
<%--查询的表单--%>
<form id="search-form" >
    用户名： <input name="userName" >
    <input name="pageIndex" type="hidden" >
    <input name="pageSize" type="hidden">
    <input type="button" id="btn-search" value="查询">
</form>
<%--显示所有用户信息的表格--%>
<div>
    <a href="javascript:void(0)" class="add-user">添加用户</a>
</div>
<%--用于添加用户信息的表单--%>
<form id="add-form" style="display: none">
    用户名: <input type="text" name="userName"> <br>
    密码: <input type="text" name="password"> <br>
    邮箱: <input type="text" name="email"> <br>
    <input type="button" value="添加" id="btn-add">
    <input type="reset" value="重置">
</form>


<script src="js/jquery-1.12.4.js"></script>
<script>
    // 点击添加按钮的时候
    $("#btn-add").click(function () {
        // 获取用户输入的数据
//        var obj = $("#add-form").serializeArray();
//        console.info("serializeArray() ==> ",obj);
//        var paramResult = $.param(obj);
//        console.info("param(obj) ==> ",paramResult);

        var obj2 = $("#add-form").serialize();
        console.info("serialize() ==> ",obj2);

        $.ajax({
            url:'adduser',
            type:'POST',
            data:obj2,
            dataType:'json',
            /*
            *   {
            *       code: 0  // 为0表示成功,其他值表示失败
            *       message: "xxx"  // 失败时的提示信息
            *       data: {...} // 成功时会返回的数据
            *   }
            *
            * */
            success:function (data) {
                if(data.code == 0){
                    alert('添加成功');
                    // 清空用户输入的数据
                    $('#add-form')[0].reset();
                    // 隐藏添加用户的表单
                    $('#add-form').hide();
                }else {
                    alert(data.message);
                }
            },
            error:function () {
                
            }
        });
    });

serializeArray+param = serialize;

//        var obj = $("#add-form").serializeArray();
//        console.info("serializeArray() ==> ",obj);
//        var paramResult = $.param(obj);
//        console.info("param(obj) ==> ",paramResult);

        var obj2 = $("#add-form").serialize();
        console.info("serialize() ==> ",obj2);

jquery的.serilizeArray从一组表单元素中检测有效控件。

元素不能被禁用
元素必须有name属性
选中的checkbox才是有效的
选中的radio才是有效的
只有触发提交事件的submit才是有效的
file元素不会被序列化

由formData对象来进行发送file元素

<body>
<form action="upload" method="post">
   文件：<input type="file" name="pic" id="pic">
   <input type="button" value="上传" id="btn-upload">

</form>
<script src="js/jquery-1.12.4.js"></script>
<script>
   $("#btn-upload").click(function () {
       let formData = new FormData();
       formData.append("pic", $("#pic")[0].files[0]);
       
       $.ajax({
           url: "/upload",
           data: formData,
           type: "POST",
           dataType: "json",
           processData:false,
           contentType:false,
           success: function (response) {
               if (response.code == 0) {
                   alert("上传成功");
                   console.log(response.data);
               } else {
                   alert(response.message);
               }
           },
           error: function () {
               alert("服务器异常")
           }

       })
   })
</script>
</body>

sanjiaowuhuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax表单元素发送

jquery解析表单数据的方法<body><%--查询的表单--%><form id="search-form" > 用户名： <input name="userName" > <input name="pageIndex" type="hidden" > <input name="pageSize" ...
复制链接

扫一扫

专栏目录