在对话框中显示 POST 响应答案

【问题标题】：Displaying POST response in Dialog在对话框中显示 POST 响应
【发布时间】：2016-12-02 21:56:41
【问题描述】：

大家好，我正在创建一个网页来测试我的 API，我正在向我的 nodejs 后端发送一个表单，后端将向我返回一个 JSON 响应。到目前为止，发送请求工作正常，我可以看到请求到达我的 VPS 控制台，但我也想在网页上创建反馈。如何创建包含来自响应 JSON 的信息的警报？以上是我的代码：

<html>
<head>
  <script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

  <!-- Always shows a header, even in smaller screens. -->
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">Title</span>
        <!-- Add spacer, to align navigation to the right -->
        <div class="mdl-layout-spacer"></div>
        <!-- Navigation. We hide it in small screens. -->
        <nav class="mdl-navigation mdl-layout--large-screen-only">
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
        </nav>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Title</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
     <div class="page-content">
       <form action="#">
         <center><p> <div class="mdl-textfield mdl-js-textfield">
           <input class="mdl-textfield__input" type="text" id="email">
           <label class="mdl-textfield__label" for="email">Email...</label>
         </div></p>
         <p><div class="mdl-textfield mdl-js-textfield">
          <input class="mdl-textfield__input" type="password" id="password">
          <label class="mdl-textfield__label" for="password">Password...</label>
        </div></p>
        <p><div class="mdl-textfield mdl-js-textfield">
          <input class="mdl-textfield__input" type="text" id="userName">
          <label class="mdl-textfield__label" for="userName">Username...</label>
        </div></p>
        <p><div class="mdl-textfield mdl-js-textfield">
          <input class="mdl-textfield__input" type="text" id="name">
          <label class="mdl-textfield__label" for="name">Name...</label>
        </div></p>
        <p><div class="mdl-textfield mdl-js-textfield">
          <input class="mdl-textfield__input" type="text" id="surName">
          <label class="mdl-textfield__label" for="surName">Surname...</label>
        </div></p>
        <p> <div class="mdl-textfield mdl-js-textfield">
         <input class="mdl-textfield__input" type="text" id="sex">
         <label class="mdl-textfield__label" for="sex">Sex...</label>
       </div></p>
       <p> <div class="mdl-textfield mdl-js-textfield">
         <input class="mdl-textfield__input" type="text" id="age">
         <label class="mdl-textfield__label" for="age">Age...</label>
       </div></p>
       <p><div class="mdl-textfield mdl-js-textfield">
        <input class="mdl-textfield__input" type="text" id="school">
        <label class="mdl-textfield__label" for="school">school...</label>
      </div></p>
      <p> <div class="mdl-textfield mdl-js-textfield">
       <input class="mdl-textfield__input" type="text" id="bio">
       <label class="mdl-textfield__label" for="bio">Bio...</label>
     </div></p>
     <p><button onclick="register()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" >
      SIGN UP!
    </button></p>
    <p><span id="msg-reg">RESULT:</span></p>
    <script type="text/javascript">
      var register = function() 
      {
        var email = $("#email").val(),
        password = $("#password").val(),
        userName = $("#userName").val(),
        name = $("#name").val(),
        surName = $("#surName").val(),
        sex = $("#sex").val(),
        age = $("#age").val(),
        school = $("#school").val(),
        bio = $("#bio").val();
        $.ajax({
          url: 'http://158.129.31.201:8000/newUser',
          type: 'POST',
          data: {email: email, password: password, userName:userName, name:name, surName:surName, sex:sex, age:age, school:school, bio:bio, point:{type:"Point", coordinates: [12.123456, 13.134578]},  type: 'register'}
        }).then(function(data) {
          $("#msg-reg").text(data);
        });
      };
    </script>
  </center>
</form>
</div>
</main>
</div>

</body>
</html>

【问题讨论】：

你在 ajax 中尝试过success 吗？

标签： jquery html json ajax post

【解决方案1】：

只需使用javascript的原生alert()函数即可。

then(function(data) {
     alert(data);
});

这将创建一个带有来自服务器端的响应的警报框。

【讨论】：

【解决方案2】：

$(function() {
     $( "#btnOpenMyAspx" ).button().click(function() {           
          $( "#divForAspxPage" ).dialog({            
              autoOpen: true, 
              height: 500,            
              width: 650,
              modal: true,
              close:function(){ 
                   $(this).dialog('destroy');            
              }        
          });           
          $.get("/NewPage.aspx",function(data){               
                $( "#divForAspxPage" ).html(data); 
          });    
    });   
});

这是我用来在对话框中加载页面的技巧，您可以根据需要以同样的方式使用它，在此处查看更多信息http://bresleveloper.blogspot.co.il/2012/05/jquery-modal-dialog-with-aspx-page.html

【讨论】：