2016-08-19 3 views
0

私はselectタグid = "departmentselect"のデータを取得して、フォームの値をmysqlデータベースに保存してからフォームを送信します。フォームを送信する前にAJAXを使用してデータを取得すると聞きました。 College選択タグとそれに対応する部門選択タグの値を選択すると、データベースの部門にのみ番号が格納されるためです。PHPに提出する前にAJAXを使用して選択タグからデータを取得するには?

例MYSQLデータベース:MySQLのクエリので enter image description here

、部門は、JSONファイルの値を取得できませんでした。番号のみが表示されます。

はここにここに私のPHPCode

<!DOCTYPE html> 
<html> 
<head> 
    <title>Sample</title> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
<form action="SignupProcess.php" method="POST" onsubmit="return check_password();" id="signupform"> 
    <select id="collegeselect" name="collegeselect"> 
     <option value="">College</option> 
     <option value="College of CAS">College of CAS</option> 
    </select> 

    <select id="departmentselect" name="departmentselect"> 
     <option value="">Department</option> 
    </select> 
</form> 
</body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> 
<script src="GetCollegeJsonData.js"></script> 
<script> 
     $('#signupform').submit(function(e)) 
     { 
      if($('#departmentselect').val() != '') 
      { 
       $ajax 
       ({ 
        type: 'POST', 
        url: 'Signup.php?select' += select, 
        success: function(data) 
        { 
         alert(data); 
        } 
       }); 
      } 
      else 
      { 
       alert('error'); 
      } 
      e.preventDefault(); 
     }); 
</script> 
</html> 

スクリプトタイプ でAJAXを使用するためのスクリプトですが、それは何の影響も与えていないようでした。

<script> 
     $('#signupform').submit(function(e)) 
     { 
      if($('#departmentselect').val() != '') 
      { 
       $ajax 
       ({ 
        type: 'POST', 
        url: 'Signup.php?select' += select, 
        success: function(data) 
        { 
         alert(data); 
        } 
       }); 
      } 
      else 
      { 
       alert('error'); 
      } 
      e.preventDefault(); 
     }); 
</script> 

jQueryのコードファイル名GetCollegeJsonData.js

は、私は、ファイルからJSONデータを取得し、私のjQueryのファイルにそれを読んで、その後、私のPHPコードにスクリプトを使用してファイルをリンク

//Get json 
$('body').on('change', '#collegeselect', function() { 
    var selected_college = $(this).val(); 

    $('#departmentselect').html(''); 

    $.getJSON("CollegeAndDepartment.json", function(data) { 
     $.each(data[selected_college], function(key, val) { 
      $('#departmentselect').append("<option value='" + key + "'>" + val + "</option>"); 
     }); 
    }); 
}) 

そのJSONファイル

{ 
    "College of CAS": ["Biology", "English", "LIACOM", "Library & Information Science", "Mass Communication", "Philosophy", "Political Science", "Psychology"] 
} 

私のAjax機能は間違っていますか?

+0

ドット( '.')がありません。 '$ ajax'ではなく' $ .ajax'でなければなりません。 – Shiyou

+0

それでも部署に番号0が表示されています。私のajax機能は間違っていると思います。 –

+0

ここにはいくつかの構文エラーがあるようですが、実際のエラーではないかもしれませんが、他の人があなたの問題を正しく識別できない可能性があります。例えば、Shiyouはあなたの質問が '$ ajax'を使うとき' $ .ajax'と言った。私は 'url: 'Signup.php?select' + = select'を見ています..ここで何が起こっていますか? 'select'変数とは何ですか? –

答えて

1

でなければなりません。

Kindly give it a try. 

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Sample</title> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body> 
    <form action="SignupProcess.php" method="POST" onsubmit="return check_password();" id="signupform"> 
     <select id="collegeselect" name="collegeselect"> 
      <option value="">College</option> 
      <option value="College of CAS">College of CAS</option> 
     </select> 

     <select id="departmentselect" name="departmentselect"> 
      <option value="">Department</option> 
     </select> 
    </form> 
    </body> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> 
    <script src="GetCollegeJsonData.js"></script> 
    <script> 
      $('#signupform').submit(function(e) 
      { 
       if($('#departmentselect').val() != '') 
       { 
        $.ajax 
        ({ 
         type: 'POST', 
         data:{select:$('#departmentselect').val()}, 
         url: 'Signup.php', 
         success: function(data) 
         { 
          alert(data); 
         } 
        }); 
       } 
       else 
       { 
        alert('error'); 
       } 
       e.preventDefault(); 
      }); 


    </script> 
    </html> 

    For GetCollegeJsonData.js, ihave modified as follows: 

    //Get json 
    $('#collegeselect').on('change', function() { 

     var selected_college = $(this).val(); 

     $('#departmentselect').html(''); 

     $.getJSON("CollegeAndDepartment.json", function(data) { 
      $.each(data[selected_college], function(key, val) { 
       $('#departmentselect').append("<option value='" + val + "'>" + val + "</option>"); 
      }); 
     }); 
    }) 
+0

それは働いた!どうもありがとう。 –

+0

ようこそ。 –

2

あなたのajaxメソッドコードには構文エラーがあり、ポストメソッドを使用すると、URLではなくデータオプションを使用してデータをポストする必要があります。データはjsonオブジェクトまたはクエリ文字列内になければなりません。 あなたのAjaxの機能は、私は以下のようにコードを編集した

<script> 
     $('#signupform').submit(function(e)) 
     { 
      if($('#departmentselect').val() != '') 
      { 
       $.ajax({ 
        type: 'POST', 
        url: 'Signup.php', 
        data: {select: $('#departmentselect').val()}, 
        success: function(data) 
        { 
         alert(data); 
        } 
       }); 
      } 
      else 
      { 
       alert('error'); 
      } 
      e.preventDefault(); 
     }); 
</script> 
+0

これは、値ではなく部署の値番号のみを表示しますjsonファイルの例:College of Casを選択し、次に英語を選択します。フォームを送信すると、値 'English'はデータベースに表示されません。値0または1しか表示されません。タイプはmysqlのテキストです。 –

+0

私は、部門選択タグのクエリ型がint型であることを認識しませんでした。 –

関連する問題