javascript - 从 Laravel Controller 中的 AJAX post 请求将数据添加到 MySQL

Question

我知道很多人正在通过 jQuery 解决这个问题，但我对此并不熟悉。

问题是我尝试使用 html 中的表单将数据发送到 MySQL，使用 javascript 检索该数据，使用 ajax 将它们发送到 php，然后尝试使用我的 Controller “保存”它们。我收到此错误:

SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'first_name' cannot be null

这是我的ajax.js的代码:

function ajaxSaveAddClient() {
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
var phone = document.getElementById("phone").value;
var cellphone = document.getElementById("cellphone").value;
var email = document.getElementById("email").value;
var city = document.getElementById("city").value;
var stock = document.getElementById("stock").value;
var source = document.getElementById("source").value;

var newClient = new Array();
newClient["first_name"] = first_name;
newClient["last_name"] = last_name;
newClient["phone"] = phone;
newClient["cellphone"] = cellphone;
newClient["email"] = email;
newClient["city"] = city;
newClient["stock"] = stock;
newClient["source"] = source;

var token = document.getElementById("csrf_token").content;
var requestSaveAddClient = new XMLHttpRequest();
requestSaveAddClient.onreadystatechange = function() {
    console.log("orsc: ", requestSaveAddClient.readyState);
};
console.log("Before open: ", requestSaveAddClient.readyState);
requestSaveAddClient.open( "POST", "newclient", true);
requestSaveAddClient.setRequestHeader("X-CSRF-TOKEN", token);
requestSaveAddClient.send(newClient);

这是我的route.php:

    Route::post('newclient', 'DashController@store');

这是我的 DashController.php:

public function store(Request $request)
{
    $client = new Client;
    $client -> user_id      = Auth::user()->id;
    $client -> first_name   = Request::get('first_name');
    $client -> last_name    = Request::get('last_name');
    $client -> phone        = Request::get('phone');
    $client -> cellphone    = Request::get('cellphone');
    $client -> email        = Request::get('email');
    $client -> city         = Request::get('city');
    $client -> stock        = Request::get('stock');
    $client -> source       = Request::get('source');
    $client -> save();
    die();
}

dahsboard.blade.php:

                <div>
                <table id="addClientTable" name="addClientTable" class="addClientTable">
                    <meta name="csrf-token" id="csrf_token" content="{{ csrf_token() }}">
                    <tr>
                        <th class="rightCellCT">
                            NOM :
                        </th>
                        <th class="centerLargeInputCT">
                            <input id="last_name" type="text"/>
                        </th>
                        <th class="rightCellCT">
                            TÉLÉPHONE :
                        </th>
                        <th class="centerSmallInputCT">
                            <input id="phone" type="text"/>
                        </th>
                        <th class="rightCellCT">
                            VILLE :
                        </th>
                        <th class="centerLargeInputCT">
                            <input id="city" type="text"/>
                        </th>
                        <th class="rightCellCT">
                            STOCK :
                        </th>
                        <th class="centerSmallInputCT">
                            <input id="stock" type="text"/>
                        </th>
                    </tr>
                    <tr>
                        <td class="rightCellCT">
                            PRÉNOM :
                        </td>
                        <td class="centerLargeInputCT">
                            <input id="first_name" type="text"/>
                        </td>
                        <td class="rightCellCT">
                            CELLULAIRE :
                        </td>
                        <td class="centerSmallInputCT">
                            <input id="cellphone" type="text"/>
                        </td>
                        <td class="rightCellCT">
                            COURRIEL :
                        </td>
                        <td class="centerLargeInputCT">
                            <input id="email" type="text"/>
                        </td>
                        <td class="rightCellCT">
                            SOURCE :
                        </td>
                        <td class="centerSmallInputCT">
                            <input id="source" type="text"/>
                        </td>
                    </tr>
                </table>
            </div>

Answer 1

问题是 XmlHttpRequest 发送方法无法像您传递的那样使用数组，因此您尝试发送的参数不会发送到 Controller 。

一个简单的替代方案可能是使用 FormData目的。一个简单的例子可能如下所示:

var token = document.getElementById("csrf_token").content,
    requestSaveAddClient = new XMLHttpRequest(),
    newClient = new FormData();

requestSaveAddClient.open( "POST", "newclient", true);
requestSaveAddClient.setRequestHeader("X-CSRF-TOKEN", token);
newClient.append("first_name", first_name);
//etc...
requestSaveAddClient.send(newClient);

我还强烈建议你多做一些研究，使用 jQuery 或类似的东西来帮助你为你的网站编写脚本，虽然有更多的学习曲线，但它会为你节省大量的时间和精力。 future 会感到痛苦，并且会让你成为一名更好的开发人员。