VUEJS如何在表单提交时调用PHP文件答案

【问题标题】：VUEJS how to call PHP file on form submitVUEJS如何在表单提交时调用PHP文件
【发布时间】：2018-06-24 19:40:23
【问题描述】：

当我点击（搜索巴士）按钮时，我正在 VUEJS 中设计和开发巴士预订门户。我想调用外部 PHP 页面，它会显示搜索结果。

我在此处提供了参考链接http://d1brg6zcfjtxzw.cloudfront.net/#/bus

请帮忙！

【问题讨论】：

您需要澄清“调用外部页面”的含义。这个其他页面上是否托管了 REST API？你想做一个 HTTP POST 吗？ HTTP GET？您是否正在向该页面发送数据？

标签： vue.js vuejs2 vue-component vue-router vue-directives

【解决方案1】：

如果您需要调用域以外的其他域名，则需要在 PHP 代码中启用 CORS 选项。

https://enable-cors.org/server_php.html

仅供参考，而不是示例中的 * 值，您应该设置自己的域。但是在测试阶段，你可以使用 as *

【讨论】：

它在同一个域中，只是我想制作 search.php 而不是 search.vue 但如何在表单上调用此页面提交。例如，页面将类似于 www.xys.com/search.php

【解决方案2】：

您需要了解 REST。您可以在更改输入或单击按钮时使用 Vue 资源库发送 GET/POST 请求，并解析来自服务器的响应。来自服务器的响应可以包含 JSON，您可以 JSON.parse() 它们，并放置在您的 data() 或存储中。

【讨论】：

【解决方案3】：

首先安装 vue-resource 或 vue-axios。

将包 vue-resource 添加到 vue 组件。

import VueResource from 'vue-resource';
Vue.use(VueResource);

创建http请求

this.$http.post('yourPath', { "key":"yourData" }).then( response => { console.log(response.data); } );

然后我假设你使用 appche 服务器，通过创建 .htaccess 文件来配置 appache 服务器，来处理 CORS 警察， .htacess 文件内容：

Header always set Access-Control-Allow-Origin "@987654321@"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
RewriteEngine On

RewriteCond %{REQUEST_METHOD} OPTIONS 
RewriteRule ^(.*)$ phpFileName.php [QSA,L]

最后使用

获取 php 文件中的数据

echo json_decode(file_get_contents('php://input'),true)["key"];

【讨论】：