Javascript Vanilla AJAX请求通过了Laravel验证，但值不是'；在控制器中不可用

我正在尝试使用AJAX（vanilla JS）向Laravel 5.5控制器提交表单，该控制器将搜索Amazon产品API

AJAX正在提交正确的关键字和类别输入，请求正在传递一个表单请求，该表单请求需要关键字和类别，但关键字和类别在控制器中不可用。我确实从控制器得到了占位符响应

开发者工具中Chrome的网络选项卡中的请求负载显示AJAX正在发送正确的条款

HTML表单

<form method="POST" action="http://local.example.com/api/products/search" accept-charset="UTF-8" id="product-search-form">
    <input name="_token" type="hidden" value="qcXA3xVIoltX9tSpeJeWuKVa3alUkq1p5tuIlKJ5">
    <div class="form-group">
        <label for="keywords" class="required">Keywords</label> 
        <input id="keywords" placeholder="Enter keywords" aria-required name="keywords" type="text">
    </div>
    <div class="form-group ">
        <label for="category">Category</label> 
        <select id="category" name="category">
            <option selected="selected" value="">Choose a category...</option>
            <option value="All">All</option>
            <option value="Apparel">Apparel</option>
            <option value="Books">Books</option>
            <option value="DVD">DVD</option>
            <option value="Electronics">Electronics</option>
            <option value="Music">Music</option>
            <option value="Software">Software</option>
            <option value="SoftwareVideoGames">SoftwareVideoGames</option>
            <option value="Toys">Toys</option>
            <option value="VideoGames">VideoGames</option>
            <option value="UnboxVideo">Video on Demand</option>
        </select>
    </div>
    <div>
        <button id="search-products-submit" type="submit" class="button-primary">Search</button>
    </div>
</form>

AJAX请求

function ajaxPostRequest(path, callback, formId) {
    return ajaxRequest("POST", path, callback, formId);
}

function ajaxRequest(method, path, callback, data = null) {
    let xhr = new XMLHttpRequest();
    let url = getFullUrl(path);

    addEventListeners(xhr);

    xhr.open(method, url, true);

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let parsedResponse = JSON.parse(xhr.responseText);
            callback(parsedResponse);
        }
    };

    setRequestHeaders(xhr, method);

    xhr.send(JSON.stringify(data));
}

AJAX请求负载

{
    keywords: "aaa",
    category: "All", 
    _token: "qcXA3xVIoltX9tSpeJeWuKVa3alUkq1p5tuIlKJ5"
}

申请表格

class SearchProductsFormRequest extends Request
{
    /**
     * Determine if the user is authorized to make this request
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request
     *
     * @return array
     */
    public function rules(): array
    {
        return [
            'keywords' => 'required',
            'category' => 'required'
        ];
    }
}

控制器

/**
 * @param SearchProductsFormRequest $request
 * @return JsonResponse
 */
public function create(SearchProductsFormRequest $request): JsonResponse
{
    if ($request->has('keywords')) {
        \Log::info('Got keywords');
    } else {
        \Log::info('Did not get keywords');
    }

    if ($request->has('keywords')) {
        \Log::info('Got category');
    } else {
        \Log::info('Did not get category');
    }

    \Log::info(print_r($request, true));
    \Log::info('keywords: ' . $request->input('keywords'));
    \Log::info('category: ' . $request->input('category'));
    return response()->json([
        'name' => 'Abigail',
        'state' => 'CA'
    ]);
}

日志输出

[2018-04-08 19:26:15] local.INFO: Did not get keywords
[2018-04-08 19:26:15] local.INFO: Did not get category
[2018-04-08 19:26:15] local.INFO: keywords:
[2018-04-08 19:26:15] local.INFO: category:

服务器响应的console.log（用于测试的虚拟数据）

因此，控制器正在被调用和响应，但无法读取输入数据

setRequestHeaders（）

---

因为您没有将该值传递给控制器，所以它为您记录了正确的输出

这就是您提出请求的地方，您在这里的代码中显式地将data=null：

function ajaxRequest(method, path, callback, data = 
// DATA IS NULL HERE
> null

) {
let xhr = new XMLHttpRequest();
let url = getFullUrl(path);

addEventListeners(xhr);

xhr.open(method, url, true);

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        let parsedResponse = JSON.parse(xhr.responseText);
        callback(parsedResponse);
    }
};

setRequestHeaders(xhr, method);

xhr.send(JSON.stringify(
//            YOU ARE PASSING NULL VALUE HERE
> data

));
}

---

通过正确的参数，您将很好

data=null

是一个值。OP在

ajaxPostRequest（路径、showProducts、searchTerms）

中正确设置了数据，我在您的xhr.send（JSON.stringify（data））中说，我明白了；只发送空数据，发送xhr.send（“keywords=“+JSON.stringify（keywords）+”）；他们的toohere xhttp.send（“data=“+JSON.stringify（data）+”和keywords++”和category“+category+”）；否，OP未发送

null

。他们调用

ajaxPostRequest（路径、showProducts、searchTerms）

，其中

searchTerms

是一个对象。然后将其字符串化并作为JSON发送。查看

setRequestHeaders（）

做什么？我添加了setRequestHeaders（）代码。因此，由于您的方法是

POST

，您将内容类型设置为

multipart/form data

，但您正在发布

应用程序/json

格式化数据。您告诉服务器期望的内容与实际发送的内容不匹配。您阅读了吗？仅供参考，

GET

请求不需要设置内容类型头，因为没有请求有效负载/正文。我更改为application/json，结果相同。setRequestHeader（'Content-Type'，'application/json'）；

{name: "Abigail", state: "CA"}

function setRequestHeaders(xhr, method) {
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.setRequestHeader("X-CSRF-TOKEN", getCsrfToken());

if (method === 'GET') {
    xhr.setRequestHeader('Content-Type', 'application/json');
} else {
    xhr.setRequestHeader('Content-Type', 'multipart/form-data');
}

function ajaxRequest(method, path, callback, data = 
// DATA IS NULL HERE
> null

) {
let xhr = new XMLHttpRequest();
let url = getFullUrl(path);

addEventListeners(xhr);

xhr.open(method, url, true);

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        let parsedResponse = JSON.parse(xhr.responseText);
        callback(parsedResponse);
    }
};

setRequestHeaders(xhr, method);

xhr.send(JSON.stringify(
//            YOU ARE PASSING NULL VALUE HERE
> data

));
}