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

时间:2014-07-14 11:37:15

标签: php jquery ajax ajaxform

我是ajax的新手,想做一个待办事项。

对于添加表单提交方法(),我有一个if-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");
}
});

当我点击我的添加btn时,控制台输出显示404找不到错误,并参考我从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');

感谢时间

4 个答案:

答案 0 :(得分:0)

我认为你在Laravel中有路由问题。此路由应该有效:

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

答案 1 :(得分:0)

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

$('#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 :(得分:0)

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 :: controller中从该教程更改它的URL,但是,该教程对于待办事项列表来说太复杂了。

答案 3 :(得分:0)

我只是通过改变来修复它:

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

为:

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

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

感谢所有人的回复