我试图通过Ajax发布表单,但遇到了jQuery's POST,这听起来像是要使用的适当工具。我尝试使用以下html形式:
<form id="my_form" action="http://localhost:4567/pedidos/guardar" method="POST">
Name:<br>
<input type="text" name="person_name"><br>
Amount:<br>
<input type="text" name="amount">
<br>
<input type="submit" value="Submit" id="submit_form">
</form>
<script type="text/javascript">
$('#submit_form').click( function() {
$.post( 'http://localhost:4567/pedidos/guardar', $('#my_form').serialize(), function(data) {
// ... do something with response from server
alert( "Data saved: " + data );
},
'json' // I expect a JSON response
);
});
</script>
此表单基于this SO answer构建
我希望将表单发布到
/pedidos/guardar
。在服务器端,为了测试表单是否正确发布,我创建了一个非常小的Sinatra脚本:require 'sinatra'
require 'json'
not_found do
status 404
"This page could not be found"
end
get '/' do
"Hello World!"
end
get '/pedidos' do
{ :person_name => "#{params[:person_name]}" }.to_json
end
post '/pedidos/guardar' do
#{}"I got #{params[:person_name]}."
{ :person_name => "#{params[:person_name]}" }.to_json
end
使用表单时,我得到
{"person_name":"Juan"}
,这是Sinatra的预期响应。但是我没有任何警报窗口,就像根本没有使用Ajax。我在表单中缺少与Ajax一起使用的内容吗?我在那里需要
action
和method="POST"
吗?提前致谢
最佳答案
尝试以此替换脚本
$('#submit_form').click( function(){
$.ajax({
url: 'http://localhost:4567/pedidos/guardar',
type: 'POST',
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify($('#my_form').serialize()),
success: function(data){
alert( "Data saved: " + data );
}
});
});
设置contentType是用于响应数据类型。