Question

我正在使用Laravel, Javascript and Ajax创建一个测验网站，我用这样的JavaScript制作了一个添加表单功能：

enter image description here

但是我希望在关注表单丢失或输入后，使用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

添加模糊添加：

IFERROR(value,value_if_error)

您的商店功能不应返回Redirect :: route，而是返回一些状态代码或JSON字符串。如果你使用laravel 4 http://laravel.com/api/4.1/Illuminate/Http/JsonResponse.html，那就说＆＃34; OK＆＃34;或者是真或错误

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

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

Answer 2

var req = new XMLHttpRequest（）;

queryString =“access_token =”+ access_token +“＆amp; data =”+ data;

req3.open（'GET'，'/ path / of / laravel / route？'+ queryString，true）;

req3.send（的queryString）

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

2 个答案: