在对话框中显示POST响应

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

<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>

来源

2016-07-28 user283543

你在阿贾克斯试过成功吗？ – Ramkee

$(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

来源

2016-07-28 13:18:46 bresleveloper

只要使用本地警报（）函数的JavaScript。

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

这将创建一个警报框，其中包含来自服务器端的响应。

来源

2016-07-28 13:24:03

在对话框中显示POST响应

回答

相关问题