深入web框架-html页面使用Ajax实现与webapi直接交互

场景
html表单
Ajax交互代码
总结说明

场景

大部分软件都有注册功能，比方说在企业官网，我们现在企业官网中实现将注册表单数据传送到业务api服务端接口，并且实现异步传送，局部刷新页面数据的效果。大家先请看页面form代码和ajax交互代码。

html表单

    <section id="contact" class="wrapper">
        <div class="container">
            <!-- /.row -->
            <form class=" form wrapper" id="rigister_form">
                <div class="form-group row">
                    <label class="col-md-2 control-label" for="Phone">电话号码:</label>
                    <div class="col-md-4">
                        <input class="form-control" id="Phone" name="Phone" placeholder="请输入您的电话号码" type="text" value="" />
                    </div>
                    <div class="col-md-4">
                        <span>11位，检查手机格式,不能为空</span>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-2 control-label" for="Name">名字:</label>
                    <div class="col-md-4">
                        <input class="form-control" data-val="true" data-val-required="输入您的名字" id="Name" name="Name" placeholder="输入您的名字" type="text" value="" />
                    </div>
                    <div class="col-md-4">
                        <span>20位，不能为空</span>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-2 control-label" for="Password">密码:</label>
                    <div class="col-md-4">
                        <input type="password" class="form-control" data-val="true" data-val-length="密码长度至少6 个字符" data-val-length-max="999" data-val-length-min="6" data-val-required="请输入密码" id="Password" name="Password" type="text" value="" />
                    </div>
                    <div class="col-md-4">
                        <span>20位，字母或数字,不能为空</span>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-2 control-label" for="ConfirmPassword">确认密码:</label>
                    <div class="col-md-4">
                        <input type="password" class="form-control" data-val="true" data-val-equalto="两次密码不匹配，请重新输入" data-val-equalto-other="*.Password" data-val-required="请输入确认密码" id="ConfirmPassword" name="ConfirmPassword" type="text" value="" />
                    </div>
                    <div class="col-md-4">
                        <span>20位，字母或数字,不能为空</span>
                    </div>
                </div>
               
                <div class="form-group row">
                    <label class="col-md-2 control-label" ></label>
                    <div class="col-md-4">
                        <input name="register" id="register" class="button-1 register-next-step-button btn btn-default" value="注册" />
                    </div>
                </div>
            </form>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>

Ajax交互代码

    $("#register").click(function () {
            //alert("Come soon...");
            //return;
            $.ajax({
                async: true,
                type: "POST",
                url: 'https://www.hocode.com:18966/api/do/InviteReg188',
       
                //contentType: "application/x-www-form-urlencoded; charset=utf-8",
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                //data: { "query": $("#apply_link_form").serialize() },
                data: $("#rigister_form").serialize(),
                success: function (data) {
                    //alert('succ-'+data);
                    if (data.code == 0) {
                        alert('注册成功！');
                    }
                    else { alert('err-注册失败！'); }
                },
                error: function (data) {
                    //alert('err-'+data);
                    if (data.code == 0)
                        alert('感谢您的支持！');
                    else
                        alert('注册失败！');
                }
            })
    });

总结说明

如图设定注册按钮id，
按钮点击事情中使用ajax对表单数据进行传值，如图ajax代码

第一个红框中申明给某url通过Post方式对后台进行异步交互。
第二个红框我们是需要注意的地方，datatype表示数据类型，contenttype表示的是内容数据交互类型和字符编码，都是使用的json的数据格式和交互方式，注意后台也必须使用json数据格式。
如果我们contenttype使用的注释部分的application/x-www-form-urlencoded交互类型，也能将form表单值传送给后台，但是收到后台接口结果后不是局部刷新，而是会刷新整个页面。