javascript - Jquery AJAX 404 form.php 未找到

Question

我正在尝试使用 Jquery 和 PHP 连接一个简单的 HTML 表单。但是，我遇到了以下错误:

jquery.min.js:2 POST http://127.0.0.1:8887/form.php 404 (Not Found)

script.js

$("#form").submit(function (e) {
    e.preventDefault();
  }).validate({
    rules: {
      name: {
        required: true,
      },
      email: {
        required: true,
        email: true
      },
      subject: {
        required: true,
      },
      message: {
        required: true,
      },
    },
    submitHandler: function () {
      // alert("enter");
      var form = $('#form');
      var formData = $(form).serialize();
      $.ajax({
        type: 'POST',
        url: '../form.php',
        data: formData
      }).done(function (response) {
        // Clear the form.
        $('#name').val('');
        $('#email').val('');
        $('#message').val('');
      });

      return false;  //This doesn't prevent the form from submitting.
    }
  });

目录结构:

16/07/2018  03:22 AM    <DIR>          .
16/07/2018  03:22 AM    <DIR>          ..
23/06/2018  05:48 PM    <DIR>          .git
14/05/2018  03:37 PM                11 .gitignore
21/06/2018  03:00 PM    <DIR>          .sass-cache
14/05/2018  03:09 PM    <DIR>          .vscode
21/06/2018  03:00 PM    <DIR>          bulma
14/05/2018  03:09 PM    <DIR>          content
14/05/2018  03:09 PM    <DIR>          css
16/07/2018  03:22 AM                66 form.php
15/07/2018  06:57 PM    <DIR>          img
16/07/2018  03:03 AM            31,166 index.html
12/05/2018  07:55 PM                45 index.php
15/07/2018  06:57 PM    <DIR>          js
16/07/2018  03:22 AM    <DIR>          php
27/05/2018  12:16 PM               378 README.md

js 文件夹包含 script.js 文件，该文件调用目录中的 form.php。如何正确地将 ajax 脚本指向正确的 php 文件？如果有帮助的话，我正在使用 Chrome Webserver 插件来模拟 Web 服务器，因为 Chrome 不允许 php 脚本将 index.html 作为文件打开。

Answer 1

这似乎是 Chrome Web 服务器的问题，我不确定它是否可以处理 php 文件并提供服务。

尝试使用内置的 php 服务器来服务您的 form.php:

在目录结构中执行:

php -S localhost:80 

然后，更改 jquery 脚本中的 URL:

  submitHandler: function () {
      // alert("enter");
      var form = $('#form');
      var formData = $(form).serialize();
      $.ajax({
        type: 'POST',
        url: 'http://localhost/form.php',
        data: formData
      }).done(function (response) {
        // Clear the form.
        $('#name').val('');
        $('#email').val('');
        $('#message').val('');
      });

      return false;  //This doesn't prevent the form from submitting.
    }