通过ajax发送表单数据到服务器答案

【问题标题】：sending form data to server by ajax通过ajax发送表单数据到服务器
【发布时间】：2014-07-14 11:37:15
【问题描述】：

我是 ajax 新手，想创建一个待办事项列表。

对于 add-form submit method() ，我有一个 if-else 。 else 有效并在其情况下给我警报，但如果不起作用，我认为这是关于我的 post 方法。

顺便说一句，这是我的 jquery 代码：

$('#add_task').submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
var title = $('#task_title').val();
if(title){
 //ajax post the form
 $.post("/add", {title: title}).done(function(data) {
   $('#add_task').hide("slow");
   $("#task_list").append(data);
 });
}
 else{
   alert("Please give a title to task");
}
});

当我点击我的 add btn 时，控制台输出显示 404 not found 错误，并参考我从 http://code.jquery.com/jquery-latest.min.js 下载的 jquery 主文件的这一行：它是：

f.send(a.hasContent&&a.data||null),b=function(c,e){var h,i,j;if(b&&    (e||4===f.readyState))if(delete Xc[g],b=void     0,f.onreadystatechange=m.noop,e)4!==f.readyState&&f.abort();

这是我的控制器：

  public function postAdd() {
  if(Request::ajax()){
    $todo = new Todo();
    $todo->title = Input::get("title");
    $todo->save();
    $last_todo = $todo->id;
    $todos = Todo::whereId($last_todo)->get();
    return View::make("ajaxData")
    ->with("todos", $todos);
 }
}

还有我的路线：

Route::controller('/', 'TodoController');

感谢时间

【问题讨论】：

如果显示404错误，则/add url未找到
@adeneo：感谢您的回复。我使用了教程packtpub.com/article/building-a-to-do-list-with-ajax.. 所以我认为一切都与 jquery 版本和我上面写的 jquery 代码有关。你对 url 有什么想法？应该是什么？
嗯，它应该是响应的有效 URL，没有魔法，如果你有一个 URL，服务器必须在调用该 URL 时响应。
@adeneo：我添加了我的代码。请再次检查我的问题。非常感谢

标签： php jquery ajax ajaxform

【解决方案1】：

将“提交按钮”更改为简单按钮并更改如下。

$('#add_task').click(function() {
    var titleField = $('#task_title');
    if(titleField.length > 0){
        $.post("/add", {title: titleField.val()}).done(function(data) {
            $('#add_task').hide();
            $("#task_list").append(data);
        });
    } else {
        alert("Please give a title to task");
    }
    return false;
});

【讨论】：

【解决方案2】：

我认为你在 Laravel 中的路由有问题。此路由应该可以工作：

Route::post('add/',array('uses' => 'TodoController@add'));

【讨论】：

【解决方案3】：

AJAX 中的 404 HTTP 状态错误仅与您发送数据的 URL 有关。将/add 更改为您的后端可以处理的东西，例如一个简单的PHP 文件，因为/add 意味着您需要完成一些htaccess/nginx 重写。

无论如何，这是一个简单的教程，如果你复制声称是你的代码，我会反对你：packtpub

你应该像这样做一个简单的 ajax 请求：

    $.ajax({ url : 'ajax.php', data: {title:title}, type: 'POST', success:
       function(response) {
          // exec success code
       }
    });

如果您对编程一无所知，就不要做互联网教程，因为您永远无法让它们发挥作用。它只是一个简单的 php 文件，您需要编写代码，并在 Route:: 控制器中更改该教程的 url，但是，该教程对于待办事项列表来说太复杂了。

【讨论】：

【解决方案4】：

我只是通过更改来修复它：

$.post("/add", {title: title})

到：

 $.post("http://localhost/Blueprints/to-doListWithAjax/public/index.php/add", {title: title})

它没有找到 localhost://add 所以我给了它完整的 addrerss .

感谢大家的回复

【讨论】：