如何提交表單而無需重新加載並將數據傳回到同一頁面，使用Node + Express

我已經查看了幾處現有的問題。他們都是提交發布請求，但機制應該是相同的獲取請求，所以我修改我的代碼工作獲取請求。但它不能正常工作。如何提交表單而無需重新加載並將數據傳回到同一頁面，使用Node + Express

什麼問題：我提交表單，但頁面不斷刷新（現在它重定向到一個新的頁面與JSON數據

我想要做什麼：提交一個表單，防止它重裝，並顯示在我的快件代碼相同的HTML頁面

<div class="row"> 
    <div class="col-md-3"> 
    <form method="GET" action="/search"> 
     <div class="form-group"> 
     <input type="text" class="form-control" id="term" name="term" placeholder="Find"> 
     <br> 
     <input type="text" class="form-control" id="location" name="location" placeholder="Near"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
    </div> 
</div> 

<script> 
    $(function() { 
    $('form').submit(function(event) { 
     event.preventDefault(); 
     var $this = $(this); 
     $.get($this.attr('action'), function(data) { 
     $('pre').text(data); 
     }); 
    }); 
    }); 
</script>

上並且json數據，我有這樣的：

app.get('/search', function(req, res) { 
var apiUrl = getApiUrl(req.query); 

var apiData = getApiData(apiUrl, function(statusCode, data) { 
    // console.log(data); 
    // res.render('api-guide', data); 
    res.send(data); 
    }); 
});

我要指出，我使用的把手爲模板。所以表單在它自己的模板中，而jquery腳本在主模板中。這是爲什麼它不按預期工作？

有人可以幫我嗎？

來源

2016-05-16 yob-v-u

您正在設置與您的AJAX請求衝突的表單中的操作參數。如果刪除

action="/search"

，並直接在您的AJAX請求

$.get('/search', function(data) { 
    $('pre').text(data); 
    });

從您的窗體聲明設定的路徑，因爲你希望它應該工作。

來源

2016-05-16 17:25:35 ruedamanuel

但是，如果我從表單中刪除它，它如何知道將數據發送到哪條路徑？ –

我剛剛更新了響應，但基本上，如果您在表單中設置了一個動作，那麼在發送您的ajax請求的同時，您的瀏覽器將「導航」到該動作，以便有效地抵消異步調用。如果您在ajax調用中設置路徑，則應該保持在同一頁面中並接收您請求的數據。 – ruedamanuel

不，即使我從表單中刪除動作，它仍然會重新加載頁面。也許這是明確的，使頁面重新加載？ –

如何提交表單而無需重新加載並將數據傳回到同一頁面，使用Node + Express

回答

相關問題