Question

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

我的html表单脚本代码创建了一个简单的表单，然后按下“enviar（submit）按钮，它将打印我的vars数据。我正在调用$.post一个名为dados.php的文件，就像你一样稍后会在此消息中看到。

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

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

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

请检查以下脚本代码以获取我的HTML表单和我的dados.php（php代码）;我提前感谢您的帮助：

我的HTML表单/ JSON：

preventDefault()

MY DADOS.PHP：

<!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>

非常感谢。

Marco Lanza

Answer 1

您没有关闭$(function(){。

您需要在结尾添加另一个});。

Answer 2

尝试在回调结束时添加return false;。如果我打算制作一个AJAX表单，我通常只在表单上设置它：<form action="someAction" method="post" onsubmit="return false;">

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

Answer 3

而不是：

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

试试这个：

$("#myform").submit(function(e) {

Answer 4

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

Answer 5

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

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

Answer 6

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

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

这样做：

$('#myform').submit(function(e) {

Answer 7

实际上，您应该只使用<input type="button">并将点击处理程序添加到该页面。

Answer 8

尝试返回false;在你的$ .post电话之后

jQuery e.preventDefault（）不工作

8 个答案: