3..jquery的ajax获取form表单数据

jq是对dom进行的再次封装。是一个js库，极大简化了js使用

jquery库在js文件中，包含了所有jquery函数，引用：<script src="jquery-1.11.1.min.js"></script>

这里主要介绍jquery获取页面form数据使用的过程

html页面代码如下，有一个form表单，id是login_value.填写内容后请求接口

<form id="login_value">
        <div>
            <label>用户名：</label>
            <input id="username" type="text" name="username" placeholder="请输入用户名" value="admin">
        </div>
        <div>
            <label>密  码：</label>
            <input id="passwd" type="password" name="passwd" placeholder="请输入密码" value="123456">
        </div>
        <div>
            <input type="button" value="登陆" οnclick="login()">
            <input type="reset" value="重置">
        </div>


    </form>

 

ajax使用:ajax只能传文本，不能传文件。

$.ajax({})

获取到数据，请求接口后，将接口返回信息显示到页面上

<script src="jquery-1.11.1.min.js"></script>//引用jquery文件
<script>
    function login(){
        var flag=confirm('你确认登陆么');//confirm时确认提示框，点击确认返回true,点击取消返回falseif(flag){//点击弹框的确认
            $.ajax({
                method:"post",

            　　data:$('#login_value').serialize(),//jq提供的获取form表单数据的快捷方式，通过form内标签的name属性{"username":"admin","passwd":"123456"}
                url:"http://localhost/api/user/login",
                success:function(data){//请求数据并返回结果给success,是一个对象，类似python的字典。回调函数。data只是一个函数的参数，跟上面的data不一样
//                    console.log(data);

                    if(data.error_code==0){//登陆成功，error_code=0。因为data是字典格式，可用点获取到
                        //成功
                        var sign = data.login_info.sign;//获取接口返回信息
                        var userid = data.login_info.userId;
                        console.log(sign);
                        console.log(userid);

//                    拼接要显示的内容的标签
                        var sign_span = '<div><span>' + sign + '</span></div>';
                        var userid_span = '<div><span>' + userid + '</span></div>';
                        var form_object = document.getElementById('login_value');//获取到form对象
                        form_object.insertAdjacentHTML('afterEnd', sign_span + userid_span)//插入到获取标签的最后
                        /*
                        *
                        * insertAdjacentHTML(where,tagStr): 父级标签内添加一个子标签字符串
                                beforeBegin: 插入到获取到标签的前面
                                afterBegin: 插入到获取到标签的子标签的前面
                                beforeEnd: 插入到获取到标签的子标签的后面
                                afterEnd: 插入到获取到标签的后面
                        */
                    }
                    else{
                        alert(data.msg)
                    }
                }

            })

        }
        else{//点击弹框的取消
            alert('点击了取消')
        }
    }
</script>

 

转载于:https://www.cnblogs.com/holly8/p/jQuery.html