Question

我的Twitter Bootstrap表单和ajax有问题。所以，我无法使用函数处理数据。我放alert(data)并且它正在工作但不打印结果。

以下是代码：

<form id="edit">
    <div class="row-fluid">
        <div class=" span12">
             <h2>Edit</h2>
            <input id='id' name='id' type='hidden' class='span2' value="<?php echo $_GET['id']?>" <div class='control-group'>
            <label class='control-label' for='name'>Name</label>
            <div class='controls'>
                <input id="n" name="n" type="text" class="span2" value="<?php echo $_GET['name']?>" </div>
                <!--/span-->
            </div>
            <!--/row-->
            <div class="row-fluid">
                <div class="span12">
                    <div class='control-group'>
                        <label class='control-label' for='description'>Description</label>
                        <div class='controls'>
                            <textarea id="d" name="d" class="span8" rows="10">
                                <?php echo $_GET[ 'description']?>
                            </textarea>
                        </div>
                        <!--/span-->
                    </div>
                    <!--/row-->
                    <div class="row-fluid">
                        <div class="span12">
                            <div class='control-group'>
                                <label class='control-label' for='longi'>Longitude</label>
                                <div class='controls'>
                                    <input id="longi" name="longi" type="text" class="span2" value="<?php echo $_GET['longi']?>" </div>
                                    <!--/span-->
                                </div>
                                <!--/row-->
                                <div class="row-fluid">
                                    <div class="span12">
                                        <div class='control-group'>
                                            <label class='control-label' for='lati'>Latitude</label>
                                            <div class='controls'>
                                                <input id="lati" name="lati" type="text" class="span2" value="<?php echo $_GET['lati']?>" </div>
                                                <!--/span-->
                                            </div>
                                            <!--/row-->
                                            <div class="form">
                                                <button type="submit" class="btn btn-primary" id="invia">Atualitzar</button>
                                                <button type="button" class="btn btn-danger" onClick="location.href='../zone.php'">Cancel</button>
                                            </div>
                                            <form>
                                                <div id="result"></div>

Funcion ajax：

 <script> 
        $(document).ready(function () {    
            $("#invia").click(function(){
             var dati = $("#edit").serialize(); //recupera tutti i valori del form automaticamente
            //form invio dati post ajax
                $.ajax({
                    type: "POST",
                    url: "edit.php",
                    data: dati,
                    dataType: "html",
                    success: function(msg){
                        $("#result").html(msg);
                    },
                    error: function(){
                        alert("error");
                    }
                });//ajax
            });//bottone click
        });
      </script>

edit.php：

<?php

//recupero
if (isset($_POST["n"])) { 

$name= urldecode($_POST["n"]);
$descrizione= urldecode($_POST["d"]); 
$lati= urldecode($_POST["lati"]);
$longi= urldecode($_POST["longi"]);

//stampo i risultati 
echo $name; 
echo "<br />";
echo $descrizione; 
echo "<br />";
echo $lati; 
echo "<br />";
echo $longi; 
echo "<br />";
}

?>

Answer 1

您的点击功能不会返回任何内容（或true）。点击后，您的表单将被提交（使用默认方法获取），这会导致您的页面重新加载（并且不显示结果）。解决方案：让click函数返回false：

   $(document).ready(function () {    
        $("#invia").click(function(){
         var dati = $("#edit").serialize(); //recupera tutti i valori del form automaticamente
        //form invio dati post ajax
            $.ajax({
                type: "POST",
                url: "edit.php",
                data: dati,
                dataType: "html",
                success: function(msg){
                    $("#result").html(msg);
                },
                error: function(){
                    alert("error");
                }
            });//ajax
            return false;
        });//bottone click
    });

Twitter的Bootstrap表单与Ajax无法正常工作

1 个答案: