0

私は新しい Web サイトに取り組んでおり、JSON についてもっと知りたいと思っています。

ウェブサイトはjQueryとPHPを使用しています

新しいメニュー項目またはサブメニュー項目を追加するために開く jQuery ウィンドウがあります。このウィンドウには、メニュー項目とサブメニュー項目が追加された選択メニューも立っています。ajaxリクエストによってデータベースに追加されるよりも新しいアイテムを追加した場合、もちろん、選択メニューに新しく追加されたアイテムを表示するためにウィンドウの更新を避けたいと思います。

次のコードはウィンドウをトリガーし、フォームを PHP スクリプトに送信します。

` var SITE_URL = " http://martin.eenwittekerst.nl/ ";

$$.ready(function() {
$( "#dialog_add_menu" ).dialog({
    autoOpen: false,
    modal: true,
    width: 900,
    open: function(){ $(this).parent().css('overflow', 'visible');     
$$.utils.forms.resize() }
}).find('button.submit').click(function(){
    var $el = $(this).parents('.ui-dialog-content');
    if ($el.validate().form()) {

        var filename        = SITE_URL+"/admin/requests/menu.php";

        $.ajax
        ({
            type: "POST",
            url: filename,
            data: "do=add&"+$('form#menu').serialize()+"",

            success: function(msg)
            {
                document.getElementById("return_message").innerHTML = msg;
            }
        });

        var filename2        = SITE_URL+"/admin/reloads/menuItems.php";

        $.ajax({
             type: "GET",
             url: filename2,
             async: false,
             beforeSend: function(x) {
              if(x && x.overrideMimeType) {
               x.overrideMimeType("application/j-son;charset=UTF-8");
              }
         },
         dataType: "json",
         success: function(data){
            //do your stuff with the JSON data
            alert(data);
         }
        });

        $el.find('form')[0].reset();

        $el.dialog('close');
    }
}).end().find('button.cancel').click(function(){
    var $el = $(this).parents('.ui-dialog-content');
    $el.find('form')[0].reset();
    $el.dialog('close');;
});

$( ".open-add-menu-dialog" ).click(function() {
    $( "#dialog_add_menu" ).dialog( "open" );
    return false;
});
});

`

これは、JSON でテストしている部分に含まれています。JSON を実行しようとしている場所に、そのコードをもう一度ここに配置します。

` var filename2 = SITE_URL+"/admin/reloads/menuItems.php";

    $.ajax({
         type: "GET",
         url: filename2,
         async: false,
         beforeSend: function(x) {
          if(x && x.overrideMimeType) {
           x.overrideMimeType("application/j-son;charset=UTF-8");
          }
     },
     dataType: "json",
     success: function(data){
        //do your stuff with the JSON data
        alert(data);
     }
    });

`

最後に、空のアラートでさえない、任意の応答を与えていないアラートがあります

初心者で申し訳ありませんが、これを行うのはこれが初めてです。私は成功せずにインターネット上に立っているものをたくさんテストしました。

私のPHPコードのコードは非常にシンプルで、もちろんテスト専用です

`

include(BASE_DOC."config.php");
include(BASE_DOC."classes/cls.db.php");

// Open the database connection
$cOpenDB  = new database_connection;
echo $cOpenDB->db_open(DB_HOST, DB_USER, DB_PASS, DB_TABLE);

$rows= array();

$sql    = mysql_query("SELECT * FROM menu_items") or die(mysql_error());
while($data = mysql_fetch_array($sql))
{
    $rows[] = $data['id'].",".$data['menu_item_name'];
}

echo json_encode($rows);
?>

`

PHPスクリプトからJSON配列を取得する方法と、選択メニューのHTMLを再構築する方法がわかりません

ここに、新しいサブメニュー項目を追加するための windowedbox の HTML のコードがあります。

`

<!-- Add New Menu Item -->
<div style="display: none;" id="dialog_add_menu" title="Voeg een nieuw menu item toe">

    <fieldset id="menu">

        <form action="" class="full validate" id="menu">

            <div class="row">
                <label for="d2_menu_item">
                    <strong>Menu item naam</strong>
                </label>
                <div>
                    <input class="required" type="text" name="menu_name" id="menu_name" />
                </div>
            </div>
            <div class="row">
                <label for="d2_menu_item_alt">
                    <strong>Menu item alt</strong>
                </label>
                <div>
                    <input class="required" type="text" name="menu_alt" id="menu_alt" />
                </div>
            </div>
            <div class="row">
                <label for="d2_menu_item_sub">
                    <strong>Wordt dit een submenu item?</strong>
                </label>
                <div>
                    <select name="sub_option" id="sub_option">
                        <option value="n">Nee</option>
                        <option value="y">Ja</option>
                    </select>
                </div>
            </div>
            <div class="row" id="showMenuItems">
                <label for="d2_select_menu_item">
                    <strong>Selecteer een Menu item om een submenu item aan te koppelen</strong>
                </label>
                <div>
                    <div id="sub_menu_item_of">
                        <select name="sub_of" id="sub_of">
                            <option>Kies een menu item om een sub menu item aan te koppelen</option>
                            <?PHP
                            $cMenuItems = new menu();
                            echo $cMenuItems->menuItemsSelect("'menu_item_name','menu_item_alt'", "menu_items");
                            ?>                                                
                        </select>
                    </div>
                </div>
            </div>            
        </form>
        <div class="actions">
            <div class="left">
                <button class="grey cancel">Annuleren</button>
            </div>
            <div class="right">
                <button class="submit">Voeg menu item toe</button>
            </div>
        </div>

    </fieldset>
</div>
<!-- End if #dialog_add_menu -->    

`

初めてこれを行うのは本当にお尻の痛みですが、誰かがこれで私を助けることができれば、私はあなたたち全員に永遠に感謝しています!

質問がある場合、または詳細情報が必要な場合は、お知らせください。

時々私の下手な英語でごめんなさい

よろしく マーティン・マイヤー

4

1 に答える 1