未发布 jQuery 表单

Question

我正在尝试通过 Ajax 来 post 一个表单，然后我遇到了 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
构建的我希望 POST 将表格 /pedidos/guardar。在服务器端，为了测试表单是否正确 posted，我创建了一个非常小的 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 的预期响应。但是我没有收到任何警报 window，就像根本没有使用 Ajax。
我的表单中缺少什么才能使其与 Ajax 一起使用？我需要 action 和 method="POST" 吗？
提前致谢

Answer 1

您正在发送数据 throw ajax：$.post 是 shorthand 到 $.ajax，但正如 documentation 所解释的那样，您必须获得对提交事件的引用并停止默认操作。

$('#submit_form').click( function( event ) {
    // Stop form from submitting normally
    event.preventDefault();

Answer 2

尝试用这个替换脚本

$('#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 用于响应数据类型。

未发布 jQuery 表单

Not posting jQuery form

javascript

forms

ajax

jquery

sinatra