在對話框中顯示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響應

回答

相關問題