Question

我正在将状态，城市，邮政编码发送到ajax.php文件。使用jquery。我无法将这些值作为回应

  <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
        <title>Jquery Ajax</title>
    </head>
    <body>
    <!------------------------Jquery-------POST DATA----------------------------------------->
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    -->
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {



        $('#id-submit').click(function() {


            var reg_state = $('#reg_state').val();
            var reg_city = $('#reg_city').val();
            var reg_zip = $('#reg_zip').val();

            var dataString = 'reg_state='+ reg_state;

            //alert(dataString);

            $.ajax
            ({
                type: "POST",
                url: "ajax.php",
                data: dataString,
                cache: false,
                success: function(data)
                {
                //$("#state").html(data);
                 alert(data);
                } 
            });

        });

    });


    </script>
    <!------------------------Jquery-----------POST DATA END------------------------------------->

    <form id="registration_form" action="" method="post">

        <div id="state"></div>


         <div class="reg-id">
            <label>
                <input placeholder="State:" type="text" tabindex="3" name="user_state" id="reg_state" value="">
            </label>

        </div>

        <div class="reg-id">
            <label>
                <input placeholder="City:" type="text" tabindex="3" name="user_city" id="reg_city" value="">
            </label>
        </div>

         <div class="reg-id-last">
            <label>
                <input placeholder="Zip/Postal:" type="text" tabindex="3" name="user_zip" id="reg_zip" value="">
            </label>
        </div>
            <input type="submit" value="submit" tabindex="3" name="reg_btn" id="id-submit">
        </div>

    </form>



    </body>
    </html>

这是ajax.php文件，我需要发送响应，并在div id =“state

中显示

<?php
if($_POST['reg_state'])
{
    echo $_POST['reg_state'];
}
else{

    echo 'nothing';
}
?>

Answer 1

尝试创建对象

var dataString = { reg_state: reg_state, reg_city: reg_city, reg_zip : reg_zip  }

Answer 2

我相信你的问题在于type=submit。用type=button替换它可以得到你想要的结果。

我不确定为什么会这样，但我猜它type=submit为input提供了额外的功能。在点击提交按钮后，该页面似乎重新加载。

PS。不要忘记你实际上需要单击按钮才能触发该功能。填写输入字段后按Enter键将无效。

Answer 3

我们何时使用输入['type'] =“提交”格式

我们必须使用

$('#id-submit').click(function(e) { 

 e.preventDefault();
}

以下是完整的工作代码

   <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
            <title>Jquery Ajax</title>
        </head>
        <body>
        <!------------------------Jquery-------POST DATA----------------------------------------->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

        <script type="text/javascript">
        $(document).ready(function() {

                $('#id-submit').click(function(e) { 

                 e.preventDefault();

                var reg_state = $('#reg_state').val();
                var reg_city = $('#reg_city').val();
                var reg_zip = $('#reg_zip').val();

                var dataString = { reg_state: reg_state, reg_city: reg_city, reg_zip : reg_zip  }


                //alert(dataString);

                $.ajax
                ({
                    type: "POST",
                    url: "ajax_city.php",
                    data: dataString,
                    cache: false,
                    success: function(data)
                    {
                    $("#state").html(data);
                    // alert('hi');
                    } 
                });

            });

        });


        </script>
        <!------------------------Jquery-----------POST DATA END------------------------------------->

        <form id="registration_form" action="" method="post">

            <div id="state"></div>


             <div class="reg-id">
                <label>
                    <input placeholder="State:" type="text" tabindex="3" name="user_state" id="reg_state" value="">
                </label>

            </div>

            <div class="reg-id">
                <label>
                    <input placeholder="City:" type="text" tabindex="3" name="user_city" id="reg_city" value="">
                </label>
            </div>

             <div class="reg-id-last">
                <label>
                    <input placeholder="Zip/Postal:" type="text" tabindex="3" name="user_zip" id="reg_zip" value="">
                </label>
            </div>
                <input type="submit" value="Response" tabindex="3" name="reg_btn" id="id-submit">
            </div>

        </form>



        </body>
        </html>

ajax_city.php

<?php
if($_POST['reg_state'])
{
    echo 'STATE: '.$_POST['reg_state'].'<br/>';
    echo 'CITY: '.$_POST['reg_city'].'<br/>';
    echo 'ZIP: '.$_POST['reg_zip'].'<br/>';

}
else{

    echo 'nothing to respond';
}
?>

使用提交按钮提交表单时无法获取jquery响应

3 个答案: