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

Question

我正在使用 Laravel、Javascript 和 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')) !!}

<小时/>

我的 QuestionController:

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.');
}

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

Answer 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()">

您的存储函数不应返回 Redirect::route，而应返回一些状态代码或 JSON 字符串。如果你使用 laravel 4 http://laravel.com/api/4.1/Illuminate/Http/JsonResponse.html只会说“OK”或正确或错误

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

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