vue.js - VUEJS如何在表单提交时调用PHP文件

Question

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

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

请帮忙！

Answer 1

• 首先安装 vue-resource 或 vue-axios。
• 将 Package 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]

• 最后使用 php 文件获取数据

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

Answer 2

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

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

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

Answer 3

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