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

Web开发中会经常出现使用web页面直接调取api或者webservice服务端的数据来刷新页面,我们举例说明在调取webapi接口情形下怎么样使用ajax来实现异步刷新页面数据。
场景
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: 'http://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表单值传送给后台,但是收到后台接口结果后不是局部刷新,而是会刷新整个页面。

如图我们最后的运行结果:
结果

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:华晨软件-云微开发平台 » 深入web框架-html页面使用Ajax实现与webapi直接交互
本文标题:深入web框架-html页面使用Ajax实现与webapi直接交互
本文地址:http://www.hocode.com/OrgTec/UI/0009.html

相关文章: Web框架Ajax实现html下拉框联动 | Web框架异步提交Ajax解析

电话
电话 18718672256

扫一扫
二维码