2

我浏览了以下两个链接的代码：http: //pastebin.com/iUd22CRY http://www.jensbits.com/2009/10/04/jquery-ajax-and-jquery-post-form-submit-带有 php 的示例

代码本身的一切似乎都很清楚，但我无法弄清楚哪些代码块与哪些文件名相关联的完整故事。基本上，我试图找到一个使用 jQuery 的 post 函数与 PDO 对象交互的最新指南，但我这样做非常不成功。

如果我无法弄清楚文件名应该是什么，我接下来计划做的是尝试转换/更新 w3schools 中的示例。基本上，使用 pastebin，我想我知道前三段代码的去向，但我不知道将 javascript 放在最后的位置。不过，在我进入贫民窟之前，我希望有人会查看我的代码。你能看出问题吗？

-编辑-我通过 Chrome 的控制台（ctrl+shift+j浏览器内）注意到一个错误：http: Uncaught SyntaxError: Unexpected token ; encode.js:17 //ajform.99k.org/issues/semicolon/或Uncaught ReferenceError: $ is not defined encode.js:1 http://ajform.99k.org/issues/orderofappearance/

文件系统结构：

webroot/sitename/index.php; webroot/sitename/process_form.php; webroot/sitename/js/jquery-1.8.2.js;webroot/sitename/js/encode.js

索引.php：

<!DOCTYPE html>
<html>
<head>
  <title>Tmp homepage</title>
  <script type="text/javascript" src="js/encode.js"></script>
  <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>

<body>
<form id="ajform">
    <fieldset>
        <legend>jQuery.post Form Submit example</legend>
        <p>
            <label for="name">Name:</label></br />
            <input id="name" type="text" name="name" />
        </p>
        <p>
            <label for="email">email:</label></br />
            <input id="email" type="text" name="email" />
        </p>
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
</form>
<div id="post"></div>
</body>

</html>

编码.js：

$(document).ready(
  $(function(){
      $("#ajform").submit(function(e){    
         e.preventDefault();  

          $.post("../process_form.php", $("#ajform").serialize(),
          function(data){
              if(data.email_check == 'invalid'){

                      $("#post").html("<div class='errorMessage'>Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.</div>");
              } else {
                  $("#post").html("<div class='successMessage'>" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".</div>");
                  }
          }, "json");    
      });

  });
)

process_form.php：

<?php

$email_check = '';
$return_arr = array();

if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) || filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
   $email_check = 'valid';
}
else {
    $email_check = 'invalid';
}


$return_arr["email_check"] = $email_check;

if (isset($_POST['email'])){
    $return_arr["name"] = $_POST['name'];
    $return_arr["email"] = $_POST['email'];
}

echo json_encode($return_arr);

-编辑- 解决错误后，感谢回答者，工作版本位于hhttp://www.jensbits.com/demos/jqsubmit/index.php。

4

2 回答 2

2

你<script type="text/javascript" src="encode.js"></script>没有加载。它返回一个 404。

并且，放在encode.jsjquery js 之后。

从您引用的我的帖子中查看演示的源代码。它会帮助你。

http://www.jensbits.com/demos/jqsubmit/index.php

谢谢，顺便说一句...

于 2012-11-05T03:54:14.353 回答
0

带有文件名的工作代码：

index.php，位于sitename/index.php：

<!DOCTYPE html>
<html>
<head>
  <title>Tmp homepage</title>
  <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="js/encode.js"></script>
</head>

<body>
<form id="ajform">
    <fieldset>
        <legend>jQuery.post Form Submit example</legend>
        <p>
            <label for="name">Name:</label></br />
            <input id="name" type="text" name="name" />
        </p>
        <p>
            <label for="email">email:</label></br />
            <input id="email" type="text" name="email" />
        </p>
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
</form>
<div id="post"></div>
</body>

</html>

process_form.php，位于sitename/process_form.php（php 5.2 或更高版本[可能因您的配置而异]）：

<?php

$email_check = '';
$return_arr = array();

if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) || filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
   $email_check = 'valid';
}
else {
    $email_check = 'invalid';
}


$return_arr["email_check"] = $email_check;

if (isset($_POST['email'])){
    $return_arr["name"] = $_POST['name'];
    $return_arr["email"] = $_POST['email'];
}

echo json_encode($return_arr);

encode.js，位于sitename/js/encode.js（使用 jQuery 1.8.2.min.js）：

$(document).ready(
  $(function(){
      $("#ajform").submit(function(e){    
         e.preventDefault();  

          $.post("../process_form.php", $("#ajform").serialize(),
          function(data){
              if(data.email_check == 'invalid'){

                      $("#post").html("<div class='errorMessage'>Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.</div>");
              } else {
                  $("#post").html("<div class='successMessage'>" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".</div>");
                  }
          }, "json");    
      });

  })
)
于 2012-11-05T04:27:35.853 回答