2016-11-06 5 views
1

質問の文言はちょっと変わっていますが、それは言葉で表現する方法がかなりわからないためです。私の問題は次のとおりです。私はJSを介して私のPHPファイルにajaxを使って.get要求をしています。PHP get型のオーバーライドを防ぐ方法

は、私は2つの方法に意味を取得するための責任があるものを持っているので、私は言う:

$.get("babynames.php", 
    { 
     type: "meaning", 
     name: nested 
    }, 
    function (data) { 
     //alert("Data loaded " + data); 
     $("#meaning").innerHTML = data; 
    }); 

などそうに見えます(作業中)、ランク付けするための別の責任者:

$.get("babynames.php", 
     { 
      type: "rank", 
      name: name, 
      gender: gender 
     }, 
     function(data){ 
     //$("#grapharea").append(data); 
      document.getElementById("graph").innerHTML = data; 
    }); 

私のindex.phpで予想される出力はようになります

The name <name here> means: 
__________________________________________________ 

<name meaning> 

Popularity: 

<Ranking goes here> 

しかし、両方の名前後でタイプが「ランク」に設定されるように見えるので、ランク付けは人気の下に行く。私が2つのJS関数を呼び出す方法は次の通りです:

document.getElementById("search").addEventListener("click", function(e){ 
    $("#resultsarea").show(); // un-hides the display area with all the info 
    nested = document.getElementById("allnames"); 
    nested = nested.options[nested.selectedIndex].value; 
    document.getElementById("nested").innerHTML = nested; 
    e.preventDefault(); 
    meaning(); 
    rank(); 
}); 

私はどこに行ったのですか?

+0

周囲を見回すと、非同期フラグを設定すると、設定する構文は正確に何か助けになりますか? – SomeStudent

+1

Asyncはデフォルトでtrueですが、2つの別々のリクエストを作成していて、通常のJSとjQueryを混在させている理由がわかりません。(完全に許可されているものの、混乱しています) – Xorifelse

+2

jQueryとDOM構文。 '$("意味 ")。innerHTML =データ;'は '$("意味 ").html(データ)'でなければなりません。 – Barmar

答えて

1

Barmarが既に指摘しているように、2つのスタイルのスクリプトを混在させることは、通常はうまくいっていません。

<?php 
    #babynames.php 

    if(isset($_POST['name'])){ 
    // fetch meaning 
    // fetch rank 

     $response = [ 
      'rank' => $rank, 
      'meaning' => $meaning 
     ]; 

     echo json_encode($response); 
    } 

?> 

とクライアントのために:

$(function(){ 
    $("#search").click(function(e){ 
    e.preventDefault(); 
    }); 

    $("#allnames").change(function(e){ 
    alert($("#allnames option:selected").text()); // use the one that works 
    alert($("#allnames option:selected").val()); // I dont have your html code. 

    var name = $("#allnames option:selected").val(); 

    $.ajax({ 
     type: "POST", 
     url: 'babynames.php' 
     data: {name:name}, 
     success: function(json){ 
     alert("Look at our PHP response.. " + json); 
     var o = jQuery.parseJSON(json); 
     alert(o.rank); 
     alert(o.meaning); 
     } 
    }); 
    }); 
}); 

真実が語られ、このコードは、構文エラーが含まれている場合、私は知りませんが、それはとにかく仕事の少しを必要とします。

考えられるのは、ドロップダウンリストの各変更に対して1つのリクエストを使用することだけです。あなたは名前を持っていて、それをPHPに提出し、ランクと意味を取り出して、1つの応答で両方を返します。

このコードでは、イベントを処理する方法を説明します。

関連する問題