1

jqueryとajaxを使用してmysqlデータベースにデータを書き込もうとしています。クエリは正常に機能しますが、div 配列にデータを追加できません。

編集:

$(document).ready(function(){

    $("#sub").click( function() {
      $.ajax({
            type: "POST",
            url:  "insert.php", 
            dataType: 'json',
            data: $("#myForm :input").serializeArray(),
            success: function(data) { 
                data = $.parseJSON(data);
                $("#data").append("<div class=\"row\">"
                           +data.position+"  "   //this section must be changed to 
                           +data.text+"  "       // something but I dont know what
                           +data.id+"  "
                           +data.date_added+"  "
                           +"</div>"); 
            },
            error:function (xhr, ajaxOptions, thrownError){
            $("#error").html(thrownError);
            }
     })
     return false;
    });

    //disable form redirection
    $("#myForm").submit( function() {
      return false; 
    });

    //clear input fields
    function clearInput() {
    $("#myForm :input").each( function() {
       $(data).val('');
    });
    }

    update();


}); 

function update() {
     $.ajax({
            type: "POST",
            url:  "fetch.php", 
            dataType: 'json',
            success: function(data) {
                $.each(data, function(){
                    $("#data").append("<div class=\"row\">"
                                       +this['position']+"  "
                                       +this['text']+"  "
                                       +this['id']+"  "
                                       +this['date_added']+"  "+
                                      "</div>");

                })
            },
            error:function (xhr, ajaxOptions, thrownError){
            $("#error").html(thrownError);
            }
     });
     return false;
};

クエリが成功した後に投稿されたデータを表示するにはどうすればよいですか?

編集：

<body>
        <div class="navbar navbar-inverse">
          <div class="navbar-inner noRadius">
            <a class="brand" href="#">toDo</a>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Home</a></li>
            </ul>
          </div>
        </div>

        <div id="main" class="container">

        <div id="data"> </div>

            <form id="myForm" action="insert.php" method="post">
                Task: <input class="input-large" type="text" name="text" />
                <br />
                <button class="btn" id="sub">Save</button>
            </form>

            <span id="error"></span>

        </div>

        <!-- Including our scripts -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript" src="script.js"></script>

        <link href="library/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="library/js/bootstrap.min.js"></script>
        <!--<script src="library/js/ajaxy.js"></script>-->

    </body>

フェッチ.php

<?php
    include_once('db.php');


    $sql = mysql_query("SELECT * FROM todo");
    $tasks = array();

    while( $row = mysql_fetch_assoc($sql) ){
        $tasks[] = $row;
    }

    echo json_encode($tasks);
?>

insert.php

<?php

    include_once('db.php');

    $text = $_POST['text'];
    $query=mysql_query("INSERT INTO todo(text) VALUES('$text')");
    if($query){
        echo "Data for $text inserted successfully!";
        }
    else{ 
        echo "An error occurred!"; 
        }

?>

シンプルな todo アプリケーションを構築しようとしています。

selectでdbにデータを挿入するつもりだったので、insert.phpを更新しました。初心者ですが頑張ります！立ち往生するのを手伝ってください！

4

2 に答える 2

1

追加を成功コールバック内に移動します..AJAX非同期です。SOコードを書いた方法では、応答にデータが入力される前にデータオブジェクトにアクセスしています。したがって、応答オブジェクトで処理されるすべての処理は、成功のコールバックに移動する必要があります。

$("#sub").click( function() {
      $.post( $("#myForm").attr("action"), 
              $("#myForm :input").serializeArray(), 
              function(data) { 

               $("#result").html(data);
               $("#data").append("<div class=\"row\">"
                           +data[0]+"  "   //this section must be changed to 
                           +data[1]+"  "   // something but I don't know what
                           +data[2]+"  "
                           +data[3]+"  "
                           +"</div>");
      });
});

そして、応答が配列の形式であると想定するthis[0]必要があります。data[0]

期待する応答に基づいて変更される場合があります。

于 2013-07-19T20:27:36.400 に答える
0

データをデータベースに永続化した後、SELECT から JSON データをエコーする必要がありました

if($query){
        $data=mysql_query("SELECT * FROM todo WHERE text = '$text'");
        $tasks[]=mysql_fetch_assoc($data);
        echo json_encode($tasks);
        }
于 2013-07-23T04:55:20.900 に答える