<th id="v9g6b"><track id="v9g6b"></track></th>

  • <em id="v9g6b"><acronym id="v9g6b"></acronym></em>
    <progress id="v9g6b"><pre id="v9g6b"></pre></progress>
    <tbody id="v9g6b"></tbody>
    <button id="v9g6b"><acronym id="v9g6b"></acronym></button>
    <rp id="v9g6b"><ruby id="v9g6b"></ruby></rp>

        <dd id="v9g6b"></dd>

        <em id="v9g6b"></em>

          深入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.sajuice.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.sajuice.com/OrgTec/UI/0009.html

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

          电话
          电话 18718672256

          扫一扫
          二维码
          本港台开奖 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>