Question

表格有效，但是我对于发生了什么以及为什么ajax不起作用感到迷茫。

我从这里的几个地方得到了代码，我相信有人会将我链接到...但老实说我对这个特别是JQuery或脚本很新，所以如果有人能告诉我什么我做错了我会永远欠你的债。

Answer 1

第93行：您在全局窗口中声明了一个对象属性。

afterLoad: function(anchorLink, index){

更改为：

var afterLoad = function(anchorLink, index){

Answer 2

我看到你有这个代码：

$('submit').click(function(){
      $.ajax({
        type:'POST',
        url: email_form.php,
        data:{
          name: name,
          email: email,
        },
        success: function(msg){
          alert('Email Sent');
        }               
      });
    });

该选择器错误，请将其更改为：

$('#submit').click(function(){
   //...

此外，您不仅要触发按钮点击，还要有两个选项，因此表单不会提交：

1）收听提交事件并阻止其提交

$('#yourformid').submit(function(e){ 
    e.preventDefault(); //... })

2）使用样式而不是提交输入更改<a>标记的按钮。这样您就可以在不触发提交的情况下收听点击事件。

Answer 3

Samuel对于您获得的JavaScript错误是正确的，但您仍远未提交该表单。在下面的脚本中，您可以通过“email”和“name”的名称引用变量，但这些变量不存在。

  $(document).ready(function(){
    $('submit').click(function(){
      $.ajax({
        type:'POST',
        url: email_form.php,
        data:{
          name: name,
          email: email,
        },
        success: function(msg){
          alert('Email Sent');
        }               
      });
    });
  });

您需要引用表单值。为此，你应该分别使用$（'input [name =“email”]'）。val（）和$（'input [name =“name”]'）。val（），所以代码看起来像

  $(document).ready(function(){
    $('#submit').click(function(){
      $.ajax({
        type:'POST',
        url: 'email_form.php',
        data:{
          name: $('input[name="name"]').val(),
          email: $('input[name="email"]').val()
        },
        success: function(msg){
          alert('Email Sent');
        }               
      });
    });
  });

最后我注意到最后一件事，你的提交按钮应该是“按钮”类型而不是“提交”，因为后者将导致页面刷新，这将破坏正在运行的JavaScript。

注意我在生成的函数中添加了Juan注意到的选择器错误。

为什么我的页面会在表单提交时重新加载？

3 个答案: