1

以下に、global.js ファイルを呼び出す単純な html ページがあります。global.js ファイルは、データベース内にある場合に名前の場所を取得する php ファイルを呼び出します。(すべてを 1 ページにまとめることもできましたが、チュートリアルに従っていました)。

 <!doctype html>
 <html
   <head>
<title>AJAX Database</title>
</head>
<body>

Name: <input type = "text" id="name">
<br />
<input type="submit" id="submit" value="Get Loc">


<div id="output"></div>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="js/global.js"></script>
</body>
 </html>

global.js は次のとおりです。

$('#submit').on('click',function() {
var name = $('#name').val();
if($.trim(name) != ''){
   $.post('ajax/name.php', {name: name}, function(data) {
    $('div#output').text(data);
      });
}
});

このままでもいいのですが、下のようにタグを入れると動かなくなります。フィールドセットも使用したいのですが、フォームタグで動作させることさえできません。

他のセレクターを使用しましたが、機能しません。問題は送信ボタンにあるようです。それがフォーム外の場合に機能するためです..何かアイデアはありますか? フォーム内で送信を使用すると、 $.post 関数が必要以上に送信されるようになると思います。

 <!doctype html>
 <html
 <head>
<title>AJAX Database</title>
</head>
<body>

    <form>
Name: <input type = "text" id="name">
<br />
<input type="submit" id="submit" value="Get Loc">
</form>

<div id="output"></div>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="js/global.js"></script>
</body>
 </html>

phpファイルは次のとおりです。 

 if(isset($_POST['name']) === true && empty($_POST['name']) === false) {
  require '../db/connect.php';

$query = mysql_query("
SELECT `names`.`location`
FROM    `names`
WHERE `names`.`name` = '" . mysql_real_escape_string(trim($_POST['name'])) . "'

");
echo (mysql_num_rows($query) !== 0) ? mysql_result($query,0,'location') : 'Name not found';

 }

私の問題は正しいセレクターを使用していないのですか、それともフォーム内の送信ボタンにセレクターを使用することに関する規則がありますか?

4

2 に答える 2

0

フォームのデフォルト アクションを防止する必要があります。を使用するか、関数の最後にevent.preventDefault()追加します。return false

$('form').on('submit', function(e) {
    e.preventDefault();
    var name = $('#name').val();
    if ($.trim(name) != '') {
        $.post('ajax/name.php', {
            name: name
        }, function(data) {
            $('div#output').text(data);
        });
    }
});​
于 2013-01-02T13:36:03.913 に答える
0

ボタンのクリックを使用しないことを強くお勧めしますが、代わりにこれをお勧めします

<!doctype html>
 <html
 <head>
   <title>AJAX Database</title>
   <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
   <script src="js/global.js"></script>
</head>
<body>

  <form id="form1">
    Name: <input type="text" id="name"><br />
    <input type="submit" id="submit" value="Get Loc">
  </form>

  <div id="output"></div>
</body>
</html>

スクリプトの場所

$('#form1').on('submit', function(e) {
    e.preventDefault();
    var name = $('#name').val();
    if ($.trim(name) != '') {
        $.post('ajax/name.php', {
            name: name
        }, function(data) {
            $('div#output').text(data);
        });
    }
    else {
      alert('Please enter name');
      $('#name').focus();
    }
});​
于 2013-01-02T16:25:36.083 に答える