VUEJS如何在表单提交上调用PHP文件

Question

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

我在这里托管了参考链接http://d1brg6zcfjtxzw.cloudfront.net/#/bus

请帮忙！

Answer 1

如果您需要除您之外的呼叫域，则需要在PHP代码中启用CORS选项。

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

Fyi，而不是示例中的*值，您应该设置自己的域名。但在测试阶段，您可以使用*

Answer 2

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

Answer 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 "http://ocalhost:8080"
  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]

• 最后使用

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

在php文件中获取数据