1

我有几行代码来创建一个表单，然后在代码中我$.post通过 JSON 使用 AJAX。

我的 html 表单脚本代码创建了一个简单的表单，然后按下“enviar（提交）按钮，它将打印我的 vars 数据。我正在调用$.post一个名为 dados.php 的文件，正如您将在本消息后面看到的那样。

我的印象是，preventDefault()通过单击“enviar”按钮使用 jQuery，什么都不会发生，但它会带到其他页面，显示来自我的 vars 的数据（我正在做print_r($_POST);和var_dump($_POST);在我的 dados.php 中。

首先，preventDefault()在用户/我点击“enviar”（提交）按钮后，jQuery 或其他人（你会在我的代码中看到注释）“阻止”任何操作可能是错误的；什么都不会发生，但仍会打印我的 vars 数据。

第二/最后，我的代码有问题。

请检查我的 HTML 表单和我的 dados.php（php 代码）的以下脚本代码；在此先感谢您的帮助：

我的 HTML 表单/JSON：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <title></title>
    </head>
    <body>

    <div id="result">texto do cliente</div>​

    <form id ="myform"action="dados.php" method="post">

        <table>
            <tr>
                <td>Nome:</td>            
                <td>
                    <input type="text" id="first_name" value="" maxlength="25" />
                </td>            
            </tr>

            <tr>
                <td>Sexo:</td>
                <td>
                    <input type="radio" id="Sexo" value="Masculino" /> Masculino
                    <input type="radio" id="Sexo" value="Feminino" /> Feminino
                </td>
                </tr>

                <tr><td>Profissão:</td>
                <td>
                    <select id="dropdown">
                    <option value ="administrador">Administrador</option>
                    <option value ="analista">Analista</option>
                    <option value ="designer">Designer</option>
                    <option value ="gerente">Gerente</option>
                    </select>
                </td>
                </tr>

                <tr>
                <td>
                    <input id="submit" type="submit" value="enviar"/>                    
                </td>
                </tr>
        </table>  

        <script type="text/javascript">
            $(function(){
                /* attach a submit handler to the form */
                $("input[type='submit']").click(function(e) {

                /* stop form from submitting normally */
                   e.preventDefault(); 
                   //e.stopImmediatePropagation();
                   //e.stopPropagation();

            $.post(   
                'dados.php', {firstname: $('#first_name').val(), sexo: $('#sexo').val(),
                             profissão: $('#dropdown').val()}, function(data) {  
                console.log(data);
                //$('#result').html(data)
                //$('#result').html(data.firstname)
                //$('#result').html(data.sexo)
                //$('#result').html(data.profissão)
                }, 'json');
            });           

         </script>        

        <script>

        </script>

    </body>
</html>

我的 DADOS.PHP：

//ECHO $_POST['dropdown'];

print_r($_POST);

var_dump($_POST);

非常感谢。

马可·兰扎

4

8 回答 8

5

你没有关闭你的$(function(){.

您需要});在最后添加另一个。

于 2012-04-19T20:57:35.947 回答
0

更改为您拥有以下内容的表单提交：

$("input[type='submit']").click(function(e) {

做这个：

$('#myform').submit(function(e) {
于 2012-04-19T20:53:13.370 回答
0

真的，您应该只使用<input type="button">并添加点击处理程序。

于 2012-04-19T20:53:55.103 回答
0

尝试添加return false;到回调的末尾。如果我打算制作 AJAX 表单，我通常只是在表单本身上设置它：<form action="someAction" method="post" onsubmit="return false;">

此外，您应该附加到按钮上的submit事件form而不是click按钮上的事件 - 请记住，如果用户按下 Enter 键，表单将提交，绕过按钮上的事件处理程序。

于 2012-04-19T20:51:50.783 回答
0

代替：

$("input[type='submit']").click(function(e) {

尝试这个：

$("#myform").submit(function(e) {
于 2012-04-19T20:52:11.410 回答
0

您是否尝试将 jQuery 脚本放入 HTML 标头并更改$(function()为$(document).ready(function(){？

于 2012-04-19T20:52:42.703 回答
0

$("input[type='submit']").click(function(e) {不是提交处理程序，它是提交按钮的单击处理程序，这可能不是您真正需要的。

尝试用替换该行$("form#myform").submit(function(e) {。

于 2012-04-19T20:52:46.143 回答
0

尝试把 return false; 在你的 $.post 电话之后

于 2012-04-19T22:15:10.110 回答