个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我正在尝试使用 AJAX 和 VueJs 提交表单。但不知何故，我没能做到这一点。我总是得到一个空的 Illuminate\Http\Request 对象。
Blade 文件:
<body>
<div class="container">
<generate-admin></generate-admin>
</div>
<script src="https:http://code.jquery.com/jquery.js"></script>
<script src="{{ url('/js/main.js') }}"></script>
</body>
组件:
<template>
<form id="createAdministrator" @submit.prevent="createAdministrator">
<div class="form-group">
<input type="text"
name="username"
id="txtUserName"
placeholder="Username"
autocomplete="off"
v-model="username"
/>
</div>
<input type="submit" value="Submit">
</form>
</template>
<script>
export default {
data: function() {
return {
username: ''
}
},
methods: {
createAdministrator: function() {
formContents = jQuery("#createAdministrator").serialize();
this.$http.post('/admin', formContents).then(function(response, status, request) {
console.log(response);
}, function() {
console.log('failed');
});
}
}
}
</script>
main.js
import Vue from 'vue';
import GenerateAdmin from './components/GenerateAdmin.vue';
var VueResource = require('vue-resource')
Vue.use(VueResource);
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');
Vue.http.options.emulateJSON = true;
new Vue({
el: 'body',
components: { GenerateAdmin }
});
gulpfile.js
var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
elixir(function(mix) {
mix.browserify('main.js');
});
routes.php
Route::get('/admin/create', function () {
return view('admin.create');
});
Route::post('/admin', function(Request $request) {
// returns an empty object.
return response(['results' => $request]);
});
Route::get('/', function () {
return view('welcome');
});
我得到的返回是:
"{"results":{"attributes":{},"request":{},"query":{},"server":{},"files":{},"cookies":{},"headers":{}}}"
当我在 Chrome 中检查“网络”选项卡的“请求负载”部分时。我确实看到表单已成功提交，无论我在上面的文本框中写入什么数据。
为什么会这样？请指导我在哪里犯了错误？
更新 1:
我正在对上面的代码进行反复试验。我删除了命名空间 Illuminate\Http\Request 并从 post 路由中删除了参数 Request $request。并将传递参数从字符串更改为对象。
这样做，就完成了我一直在寻找的工作。为什么我不知道。我仍在寻找可以向我解释这件事的人。
为什么在 routes.php 文件中添加命名空间 Iluminate\Http\Request 没有像我预期的那样工作，而删除它完成了任务？
谁能告诉我为什么没有早点解决？非常感谢任何形式的帮助。
P.S.:最近开始学习VueJs Components。
最佳答案
作为我遵循的一般做法，任何需要传递给 laravel Controller 的表单数据都作为 json 对象从 vue 前端传递。然后在 laravel Controller 中(在你的情况下路由具有闭包函数)使用 $request->get('key') 检索接收到的 json 对象的值。
所以在你的情况下，组件代码可以是
<template>
<form id="createAdministrator" @submit.prevent="createAdministrator">
<div class="form-group">
<input type="text"
name="username"
id="txtUserName"
placeholder="Username"
autocomplete="off"
v-model="username"
/>
</div>
<input type="submit" value="Submit">
</form>
</template>
<script>
export default{
template:require('./generate-admin-template.html'),
data() {
return {
username: ''
}
},
computed:{
formData(){
return {
username:this.username
}
}
},
methods: {
createAdministrator: function() {
this.$http.post('/admin', this.formData).then(function(response) {
console.log(response);
}, function() {
console.log('failed');
});
}
}
}
</script>然后在你的routes.php文件中
<?php
use Illuminate\Http\Request;
/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the controller to call when that URI is requested.
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('/admin/create', function () {
return view('admin.create');
});
Route::post('/admin', function (Request $request) {
return response(['results' => $request->get('username')]);
});
我猜 Illuminate\Http\Request 实例返回一个 $request - Collection 所以我们需要使用 Collections 上可用的方法 访问这些值>.
我已经测试了上面的代码以及您的 main.js 和 '/admin/create' 代码。
还有一件事 - 我认为如果您将序列化的表单数据发送到 Controller ，那么在 Controller 内它需要被反序列化以获得包含 $key=>$value 对的对象或数组方便获取所需数据。
关于php - 在 Laravel 5.1 中使用 VueJs 和 AJAX 提交表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38093745/
25
4
0
我试图将我的 VueJS 组件中的某些内容发送到位于包含该组件的 html 页面中的函数。我是否遗漏了什么，或者这是不可能的？ 在我的组件中作为方法: insert: function(){
完全遵循 docs的语言说明，我正在尝试以德语格式显示日期。相反，我仍然看到它是英文的:“12 Apr 2020”。 也尝试使用西类牙语，仍然得到“2020 年 4 月 12 日”。 我错过了什么吗？
我想从 Chart 对象访问 getValue 方法，但我得到的函数未定义。 import Vue from 'vue'; import C
我正在使用 laravel-vuejs 应用程序。当 vuejs 渲染 css 时，它会在 html head 中附加一些样式标签，如下图所示。有什么办法可以隐藏这个标签吗？我认为可以通过添加一些插件
我正在为 VueJS 创建一个加载栏插件，我想使用该插件控制 VueJS 组件(插件的一部分)的数据。 所以，最后我想做以下事情: 在 main.js 中包含插件 import VueLoadingB
如何使用 VueJs 和 VueJS-Router 为 Pimcore 进行扩展？ 到目前为止，前端的 vuejs 没有任何问题……但我无法让 VueJs-Router 运行。 有人有在 pimcor
也许你可以成为我一天的救世主。 我正在尝试为我的扩展实现 vue-components。 我不能包含自定义 Vue.js 组件。我关注了https://pagekit.com/docs/develop
我是 Laravel 和 VueJS 的新手，对于困惑的代码提前深表歉意。 我一直在尝试制作一个注册表单，并将 VueJS 集成到 laravel 中以使其更具动态性。现在我一直在尝试使用 {{ }}
我想使用函数作为数据属性。这似乎在“works”数据属性的情况下工作得很好。但是我需要函数中的 this 上下文，以便我可以计算存储在 this.shoppingCart (另一个属性)中的值。 这可
我正在尝试从另一个方法调用一个方法，为此我使用了它。但是我的控制台导致我出错。 如何在 Vuejs 中调用另一个方法中的方法？ 代码 methods: { searchLocations:
我已经使用 webpack_loader 创建了 Django 和 VueJS 集成项目。Django 在本地主机 8000 上运行，而 VueJS 在 8080 端口上运行。但是端口 8000 在控
我正在学习如何通过 udemy 类(class)制作单页应用程序，同时尝试做一个大学项目。问题是，在我的 Controller 中，我将数据库查询作为 json“alunos”发送到前端。现在，在 V
我有一个带有一些 html 的#app 容器，我在#app 上创建了 Vue 实例，所有内容都被编译并转换为 Vuejs 组件。然后我在另一个 html 字符串中使用 ajax，我需要以某种方式将其编
我有一个 symfony 2.8 应用程序，我最近集成了 VueJs 2 作为我的前端框架，因为它提供了很大的灵 active 。我的应用程序不是单页的，我使用 symfony Controller
好吧，我遇到了一个问题，虽然是一个奇怪的问题，但我到处都找不到答案。 我们被指派用 Vue.js 创建一个购物车，我已经完成了我自己开始了这个项目，想看看我能用 vuejs 做什么。问题出现在页面加载
逻辑 我有带有输入作为标签的复选框，其值来自数据库，因此文本(值)已经存在。 (完成) 我想列一份检查项目 list (完成) 我想如果我改变了一个项目的值得到改变的值，但它仍然给我数据库的值(需要帮
我正在尝试在页面上显示公告列表(从 API 检索)。我正在使用 Vuex 商店，我有一个名为 announcements 的状态。我还希望每次用户刷新/进入页面时更新此列表。所以我使用了生命周期钩子(
使用单文件模板，我希望有一个按钮，如果数组为空，则显示“单击此处”，如果数组已填充，则显示值。 ajax 工作正常并且对象正在更新，但按钮不会重新呈现。我在这里做错了什么？ Mobil
在 VueJS 中，有没有办法在模板或脚本中将字符串插入字符串？例如，我希望以下内容显示 1 + 1 = 2 而不是 1 + 1 = {{ 1 + 1 }}。 {{ myVar }}
我在我的项目中使用 VueJS 2，我意识到我的构建部署很糟糕。 这是我在 github 上部署我的 VueJS 构建的脚本: #!/usr/bin/env sh # abort on errors
我是一名优秀的程序员,十分优秀！