Question

我已经使用一些源代码from here来使用AJAX提交表单。表单基本上是从用户那里获取一些信息并通过PHP将其放入数据库中。我的代码是有效的，但鉴于我正在处理的工作有很多形式都在做同样的事情，我 - 显然 - 想确保我的代码是精益和平均的。因此，请确保我的每个表单字段名称与我的数据库相同，并为表单的各个部分提供一些匹配的ID以供用户反馈，并将其更改为以下内容：

<script type="text/javascript">

$(document).ready(function() {

  // process the form
  $('#formId').submit(function(event) { // for the specified form:

  //  completeForm('#formId'); // WHERE I CALL THE FUNCTION

// FUNCTION STARTS HERE WHEN IT IS ONE

    var formData = {}; formId = '#formId';

    $(formId + ' input, ' + formId + ' select, ' + formId + ' textarea').each(
      function(index){    // for each item (input, select, textarea in the specified form
        var input = $(this);
        // First, clear any existing formatting that has been added by previous form inputs
        $('#' + input.attr('id') + '-group').removeClass('has-info has-error has-success bg-error bg-info bg-success');

        // Next, add data to the array of data to pass to the PHP script
        Array.prototype.push.call(formData, input.val());

      }
    ); // End of loop through each item.

    // Now the data is collected, call the requested PHP script via AJAX.
    $.ajax({
      type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
      url : $(this).attr('action'),  // '/processing/general_settings_processing.php', // the url where we want to POST
      data : formData, // our data object
      dataType : 'html' // 'json' // what type of data do we expect back from the server
    })
    // using the done promise callback
    .done(function(data) {

      // log data to the console so we can see
      console.log(data);

      // Return success and error messages to the user
      // Code to come once the basics have been sorted out!

    });
// FUNCTION WOULD END HERE WHEN IT IS ONE.
    event.preventDefault();
  });
});
</script>

上面的代码绝对正常;相关的PHP文件被调用 - 虽然我还没有在这个特定的文件中完成处理 - 做它的东西（我把它回显到文件的$ _POST数组并返回到控制台日志atm中的视图）。

然而，当我尝试将其作为一个函数时，它没有 - 控制台日志只是简单地回应了这个文档的源代码而不是它应该做的PHP数组。该函数位于$(document).ready行之上;指定为function completeForm(formID) { . . . }，包含注释中所述的代码部分，并在注释掉的行中调用，如图所示。所以，从逻辑上讲（对我来说）它应该有效。

最终的想法是在一个文件中执行此功能，该文件可以被调用它的所有表单调用，而调用该函数的代码位于页面的相关部分。有些页面会使用多个表单。（我提到即使我在这里做的工作也适用，但是当我重新使用代码时它不会！）

（我对JS和JQuery相对较新，虽然掌握了一些编程技术，主要是在PHP中。）

Answer 1

您在制作该功能时遇到的问题是您忘记包含“thisBinding”。因此，当您尝试使用以下代码在ajax调用中使用表单的操作目标时：

url : $(this).attr('action')

它找不到“操作”属性 - 基本上问题是this实际上是window，因此没有操作属性。只需将this绑定到函数调用，代码就会按照书面形式运行。

completeForm.call(this,'#formId');

.call ^MDN

Javascript代码运行正常，直到放入函数

1 个答案: