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

Posted 2023-03-14

【中文标题】JavaScript 表单使用 Ajax 和 Laravel 路由提交到数据库

【英文标题】：JavaScript form submit to database using Ajax and Laravel route

【发布时间】：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.');

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

【参考方案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)