Question

我正在获取一个json对象，解析它的字段并尝试设置（更新）未更新的标题字段（h1），我不明白为什么？

服务器端看起来：

var express    = require('express');
var app        = express();
var fs         = require("fs");
var bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({    
  extended: true
})); 


app.get('/', function (req, res) {
   console.log("Got request from: ", req.ip);   
   var clientPage = fs.readFileSync('AjaxSO.html');   
   res.send(clientPage.toString());
})

app.post('/result', function (req, res) {      
   console.log('Got Personal Information: ' + req.body.firstName + " " + req.body.lastName);   
   response = {
       first_name:req.body.firstName,
       last_name:req.body.lastName,
       id:'1234'
   };
   console.log(response);
   res.send(JSON.stringify(response));  
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port
  console.log("Listening at http://%s:%s", host, port)
})

客户方：

<html>
<head>
    <title> Test AJAX </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">        
    </script>
</head>
<body>      

     <p>            
        <h1 id="smsId"> Info: <h1>      
     </p>    
     <p>
        <form id="form">        
            <fieldset>
                <legend>Personal information:</legend>
                 First name: 
                <input type="text" name="firstName">
                <br>
                Last name:
                <input type="text" name="lastName">
                <br>
                <button id="button1"> Button </button>
            </fieldset>
        </form> 
     </p>

    <script type="text/javascript">

        $(document).ready(function(){
            $("#button1").click(function(){

                f = $("firstName").val();
                l = $("lastName").val();    

                $.post("/result",
                {
                  firstName: f,
                  lastName: l
                },
                function(data,status){      
                    var obj = jQuery.parseJSON(data);
                    console.log("Data: " + data + "\nStatus: " + status);           
                    console.log("Id:" + obj.id);
                    $('#smsId').text(obj.id);                   
                });
            });
        });     

    </script>

</body>

</html>

控制台输出是： XHR完成加载：POST＆＃34; http://127.0.0.1:8081/result＆＃34; .m.ajaxTransport.send @jquery.js:9664m.extend.ajax @jquery.js:9215m.each.m。（匿名函数）@ jquery.js：9361（匿名函数）@？firstName =＆amp; lastName =：35m.event.dispatch @jquery.js：4670m.event.add.r.handle @jquery.js：4338 ？firstName =＆amp; lastName =：42数据：{＆＃34; id＆＃34;：＆＃34; 1234＆＃34;} 现状：成功？firstName =＆amp; lastName =：43 Id：1234 导航到http://127.0.0.1:8081/?firstName=&lastName=

因此，您可以看到我正在解析正确的值＆＃39; 1234＆＃39;，但由于某种原因，该字段未更新...

感谢您的帮助......

Answer 1

点击button会提交form，因为其默认type为submit，您可以在日志的最后一条消息中看到此内容：{{1} }。根据连接的速度和缓存配置，重定向将在调用成功回调时发生，或者在调用成功回调后发生，但在这两种情况下，您都不会看到Navigated to http://127.0.0.1:8081/?firstName=&lastName=因重定向而发生变化。

因此，您需要阻止按钮的默认行为。

h1

或者您需要将按钮类型更改为$("#button1").click(function(e){ e.preventDefault(); //rest of your code });：

button

为什么返回值没有更新？

1 个答案: