JavaScript 表单使用 Ajax 和 Laravel 路由提交到数据库答案

【问题标题】：JavaScript form submit to database using Ajax and Laravel routeJavaScript 表单使用 Ajax 和 Laravel 路由提交到数据库
【发布时间】：2015-07-11 06:35:57
【问题描述】：

我正在使用Laravel, Javascript and Ajax 制作一个测验网站，并使用 JavaScript 制作了一个添加表单功能，如下所示：

但我想在失去对表单的关注或输入后，使用 Ajax 将表单数据（以创建新的测验问题）发送到我的 Laravel QuizController 路由中。但我不知道该怎么做。

我的 JavaScript/Ajax：

var limit = 1;
var count = 0;
var myButton = document.getElementById('myButton');
var container = document.getElementById('container');


function createQuestion() {

if(count < limit) {
    var input = document.createElement("input");
    input.type = 'text';
    input.id = '';
    input.setAttribute('class', 'form-control')
    container.appendChild(input);
    count++;
}
else {
    alert ('Enter this question first before you can add another question!');
}
}


function storeQuestion() {
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        //
    }
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}

我的 Laravel.blade：

<div class="form-group">
        <div id="container"></div>
    </div>

    {!! Form::button('Add Quiz', array('onclick' => 'createQuiz()', 'class' => 'btn btn-default', 'id' => 'myButton', 'value' => 'Add question')) !!}

我的问题控制器：

public function store(Quiz $quiz)
{
    $input = Input::all();
    $input['quiz_id'] = $quiz->id;
    Question::create($input);

    return Redirect::route('quizzes.show', $quiz->slug)->with('message', 'Question created.');
}

我希望有人可以帮助我，因为我已经被这个问题困扰了一段时间..

【问题讨论】：

标签： javascript php ajax database laravel

【解决方案1】：

要使用 AJAX 而不是标准的 HTTP POST，您应该捕获 enter 和 blur 事件。

input type text and onKeyDown not working under IE 的第一个答案中解释了如何捕获输入，但在测试输入时您应该运行 storeQuestion

添加模糊添加：

<input type="text" name="item_code" onkeydown="test(event)" onblur="storeQuestion()">

您的 store 函数不应返回 Redirect::route 而是一些状态代码或 JSON 字符串。如果你使用 laravel 4 http://laravel.com/api/4.1/Illuminate/Http/JsonResponse.html 那只会说“OK”或 true 或 error

您应该修改 storeQuestion 以将新的回答/编辑/删除按钮也添加到列表中。 ( // )

一种更简单的方法是不使用 AJAX，而是通过将 onblur 事件处理程序附加到文本框来在失去焦点后使用 javascript 提交表单。

【讨论】：

这是学校的作业，我们需要使用 AJAX 将表单发送到数据库中
和 xmlhttp.open("GET","ajax_info.txt",true);恐怕不好。你应该从控制器调用存储路由/函数

【解决方案2】：

var req = new XMLHttpRequest();

queryString = "access_token=" + access_token + "&data=" + 数据；

req3.open('GET', '/path/of/laravel/route?' + queryString, true);

req3.send(queryString)

【讨论】：