如何通過html表單使用jquery，json和ajax？

我需要在html上填寫表單時發送json。我有以下的html：如何通過html表單使用jquery，json和ajax？

<head> 
<title>Insert title here</title> 
</head> 
<body> 
<form id="form"> 
    Nome: <input type="text" id="nome" /> 
    Idade: <input type="number" id="idade" /> 
    <input type="button" id="submit" value="submit"/> 
</form>

及以下JS：

src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" 
var arr = { 
    City : 'Moscow', 
    Age : 25 
}; 

$(document).ready(function() { 
    //click on button submit 
    $("#submit").on('click', function() { 
     //send ajax 
     $.ajax({ 
      url : 'http://localhost:8080/DBRest/rest/escreve', 
      type : "POST", // type of action POST || GET 
      dataType : 'json', // data type 
      contentType : 'application/json; charset=utf-8', 
      data : $("#form").serialize(), // post data || get data 
      data : JSON.stringify(arr) 
     }) 
    }); 

});

我已經找了here，here和here。

我試圖創建一個arr變量來模擬一個填充表單，但沒有得到任何東西。我想知道dataType和contentType之間的區別。並且關於這個特定行：

data : $("#form").serialize()

這是正確的嗎？簡單和雙引號之間有區別#form

來源

2016-11-23 GabrielRado

你確定這個問題不是表單提交嗎？也許試試用''（'＃form'）。on（'submit'，function（e）{e.preventDefault（）; //繼續你正在做的事情}）;'而不是聽點擊提交按鈕。 – Gavin

首先，您將data屬性設置兩次。刪除data: JSON.stringify(arr)。其次，如果發送序列化表單，它將是x-www-form-urlencoded，而不是JSON，因此您應該刪除contentType屬性，因爲編碼形式是默認值。

然後，您的HTML input元素缺少序列化和檢索服務器上的值所需的name屬性。

Nome: <input type="text" id="nome" name="nome" /> 
Idade: <input type="number" id="idade" name="idade" />

最後，您應該掛鉤的事件處理程序submit事件form元素和呼叫preventDefault()停止標準提交，就像這樣：

$("#form").on('submit', function(e) { 
    e.preventDefault(); 

    $.ajax({ 
     url: 'http://localhost:8080/DBRest/rest/escreve', 
     type: "POST", 
     dataType: 'json', 
     data: $("#form").serialize() 
    }) 
});

想必你也想success和error處理程序函數（或done()和fail()方法）處理您從請求中返回的響應。

來源

2016-11-23 13:51:08

對不起，但沒有奏效。 Chrome的F12功能沒有顯示任何問題。我可以向你展示什麼樣的反饋？有沒有更好的方法來分析和調試它？ – GabrielRado

你是什麼意思'它沒有工作'？你期望發生什麼？首先在控制檯的網絡選項卡中檢查請求，並確保響應代碼爲'200 OK'。另外，正如我所提到的，你錯過了AJAX調用中的任何回調處理程序，所以UI將不會被更新，如果這是你所期望的 –

我得到415錯誤，並通過更改'dataType：'application/json' '。除此之外，沒有一點改變。非常感謝 – GabrielRado

這裏的問題是，表格使用<input name=參數序列化。例如

<input type="text" id="nome" name="nome" />

來源

2016-11-23 13:52:11 Zoka

如何通過html表單使用jquery，json和ajax？

回答

相關問題