Question

我正在尝试通过Ajax发布表单，我遇到了jQuery's POST，这听起来像是使用的propper工具。我尝试使用以下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"吗？提前致谢

Answer 1

您正在发送数据抛出ajax：$ .post是$ .ajax的简写，但正如documentation解释的那样，您必须获取对提交事件的引用并停止默认操作。 / p>

$('#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表单

2 个答案: