我试图通过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一起使用的内容吗?我在那里需要actionmethod="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是用于响应数据类型。

10-06 05:32
查看更多