AJAX如何在不重新加載頁面的情況下工作？

我有一個代碼（不是我寫的），該代碼將一個人書籤並添加到候選名單中。它看起來像這樣：AJAX如何在不重新加載頁面的情況下工作？

JS &阿賈克斯部分：

self.isShortlisted = ko.observable(@(Model.Application.IsShortlisted ? "true" : "false")); 

self.isHidden = ko.observable(@(Model.Application.IsHidden ? "true" : "false")); 

$('form#shortlistForm').ajaxForm(function() { 
    viewModel.applicationViewModel.isShortlisted(true); 
}); 

$('form#unshortlistForm').ajaxForm(function() { 
    viewModel.applicationViewModel.isShortlisted(false); 
});

來源

2017-06-18 Dukakus17

請不要問很多關於同一問題的問題。只詢問一個問題並編輯它以更改其內容。 :-) –

你可以發佈viewmodels'viewModel'和'applicationViewModel'嗎？ –

如果'applicationViewModel'在你的ViewModel中是可觀察的，那麼你應該在你的Ajax函數中寫'viewModel.applicationViewModel（）。isShortlisted（true）;'。即，將'（）'添加到'applicationViewModel'。 –

您與淘汰賽混合jQuery的。提交由jQuery處理。 如果您使用的淘汰賽，讓它來處理提交事件增加了<form>此submit: submitShortlistForm,：

<form id="shortlistForm" data-bind="submit: submitShortlistForm, style: { display: application.isShortlisted === false ? 'inline-block' : 'none'}, attr: {action: '@(MVC.GetLocalUrl(MVC.HireOrgJobApplication.ViewApplication(Model.CurrentOrganization.CustomUrl, Model.Job.JobKey, "xxx/ajax-shortlist")))'.replace('xxx', application.applicationKey)}" method="post" style="display:inline;"> 
    @Html.AntiForgeryToken() 
    <input type="hidden" name="ApplicationKey" data-bind="attr:{ value : application.applicationKey }" /> 
    <button type="submit" class="btn-act jui-tooltip" title="Shortlist"> 
     <i class="fa fa-2x fa-star"></i> 
    </button> 
</form>

然後，在您的視圖模型補充一點：

self.submitShortlistForm = function(){ 
    // I think is better to use $.post() or $.ajax(). 
    // I use the pluging because is in your question. 
    $('form#shortlistForm').ajaxForm(function() { 
     // Allways change position [0] of the observable array 
     self.applications()[0].isShortlisted = true; 

     var data = self.applications().slice(0); 
     self.applications([]); 
     self.applications(data); 
    }); 
    $(this).ajaxSubmit(); 
}

在淘汰賽提交事件我將該表單與ajaxForm插件綁定，然後提交。我不確定jQuery插件，我會使用$.post()或$.ajax()。

你可以在這個鏈接The "submit" binding找到更多關於Knockout的信息。

我不喜歡這個解決方案，因爲您要刪除self.applications可觀察數組的所有內容。最好使用mapping plugin並將所有的application對象（及其內容）轉換爲可觀察對象。但是用這種方法，你應該修改你的ViewModel和視圖。

更新1（19/06/2017）

如果這<form>是foreach循環中，那麼self.submitShortlistForm可能是這樣的：

self.submitShortlistForm = function(application){ 
    $('form#shortlistForm').ajaxForm(function() { 
     // Updates the current row element. 
     application.isShortlisted = true; 

     var data = self.applications().slice(0); 
     self.applications([]); 
     self.applications(data); 
    }); 
    $(this).ajaxSubmit(); 
}

和HTML：

<form id="shortlistForm" data-bind="submit: $root.submitShortlistForm, ...">

希望這會有所幫助。

來源

2017-06-19 08:33:31

非常感謝您的先生。但是，當我添加到我viewModel，它給了我一個消息，說：「未捕獲的ReferenceError：無法處理綁定」foreach：function（）{return filteredApplications}「消息：無法處理綁定」submit：function（）{return submitShortlistForm }「消息：submitShortlistForm沒有定義」//我假設發生這種情況是因爲這個表單在敲除foreach循環中。有沒有解決這個錯誤？ – Dukakus17

@ user7677413我更新了我的答案，希望這有助於。如果您不斷收到此錯誤，請嘗試將'self.submitShortlistForm'的主體留空，以放棄任何語法錯誤。在這個小提琴中（https://jsfiddle.net/L39h30je/2/），你有一個運行的例子;它顯示了三個項目;如果你點擊每一個，它會改變。 –

謝謝。我不再有錯誤了。但基於我的HTML表單的條件{display：application.isShortlisted === false}，當我單擊表單時它不應該消失，因爲它會將「isShorlisted」更改爲true？我也嘗試使用控制檯將isShortlisted更改爲true，但沒有對按鈕做任何更改。 – Dukakus17

阿賈克斯是客戶端腳本，要和從服務器/數據庫，而不需要回發或通信完整的頁面刷新。
適合於Ajax的最佳定義是 交換與服務器數據這Ajax的方法使用，它僅更新網頁的部分

來源

2017-06-18 08:01:56

謝謝，但你有任何想法我的額外問題？ – Dukakus17

我認爲這個鏈接可能對你有幫助。 http://knockoutjs.com/documentation/json-data.html –

AJAX代表「異步JavaScript和XML」，正如你所指出的，它是用來無需重新加載頁面即可執行任務。

What makes ajax work without reloading the page?

在回答你的問題，這是「異步」任務可沿側面以外的任務執行，不需要等待別的東西來完成（同步）。因此，您不需要重新加載/刷新頁面以顯示新信息，因爲它同時執行。

AJAX使用xhttp請求通常從Web服務器返回JSON對象。您可以操縱DOM，JavaScript或HTML將對象顯示給用戶。

You can read more about AJAX here

希望這會有所幫助

來源

2017-06-18 08:03:35 Coopza

謝謝。你對我的另一個問題有任何想法嗎？ – Dukakus17

AJAX如何在不重新加載頁面的情況下工作？

回答

相關問題