1

さて、私は私が単純な解決策であると思われるもののためにインターネットを精査するのにしばらく時間を費やしました。私が見てきたコードとajaxテンプレートを紹介します。

<form style="padding:10px 2px;" name="test" class="searchform" action="#" method="GET">
<input style="margin-top:22.5px;" name="input_value" type="text" class="searchbx" size="" placeholder="Search songs..." />
<select name="cbb">
<?php
echo "<option value='artist'>$Artist</option>";
echo "<option value='name'>$Title</option>";
?>
</select>
<input id="sa" style="position:absolute;margin-top:35px;width:90px;" name="submit" type="submit" class="searchbutton" value="OK" />
</form>
<div id="sidebar-query-results">
         <ul id="current-list" style="list-style: none; padding: 0;">
<?php
if (isset($_GET['submit']))
{
// Execute this code if the submit button is pressed.
if (empty($_GET['input_value'])) {
die();
}
include "db_config.php";

$input_value = $_GET['input_value'];
$combo_box_value = $_GET['cbb'];
echo $formvalue;
echo $cbbvalue;
$query =  "SELECT * FROM `links` WHERE `$combo_box_value` LIKE '%$input_value%' LIMIT 0, 20" ;   
$result = mysql_query($query);
if($result) {
while($row = mysql_fetch_assoc($result)){
$cover = $row['cover'];
$title = $row['title'];
$name = $row['name'];
$artist= $row['artist'];
$url = $row['url'];

スクリプトの残りの部分は、結果などを出力するだけです。

スクリプト自体は非常に「だらしない」と理解していますが、魅力のように機能しますが、現時点で私が本当に懸念しているのは機能だけです。

とにかくここにajaxテンプレートがあります：

 <script>
 $('form[name="test"]').submit(function(e) {
 e.preventDefault();

 $.ajax({
 url : #.action,
 type : this.method,
 data : $(this).serialize(),
 success : function(response) {

 }
 });
 });
 </script>

いずれにせよ、私が本当に変更したくないphpスクリプトを動作させることができないのはajaxスクリプトだけです。私は何十ものチュートリアルを見てきましたが、私の状況にそれらを実装するのに多くの問題を抱えています。

4

1 に答える 1

2

これは、スクリプトが実際に構文エラーを引き起こしているため、AJAXバインディングが期待どおりに発生していないためです（全体<script>が拒否されているため、submitイベントにバインドされておらず、呼び出されません.preventDefault()）-主に次の理由によります。

url : #.action,

使用するように変更してみてください。

url : $(this).prop('action')

（<form action="...">属性を参照する場合）それ以外の場合は、次のような文字列を使用しますurl: '/submit.php',

より普遍的なスクリプトは次のようになります。

$('form.ajax').on('submit',function(e){
  var $form = $(this);
  $.ajax({
    'type': $form.prop('method'),
    'url': $form.prop('action') || document.location,
    'data': $form.serialize(),
    'success': function(response){
      // handle response
    }
  });
  e.preventDefault();
});

ajax次に、ajaxで拡張したい任意のフォームにクラスを追加できます（もちろん、javascriptがサポートされていないフォームはデフォルトで「従来の」メソッドに戻ります）。

于 2012-10-29T00:34:58.537 に答える