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 回答