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>被拒绝，因此它没有被绑定到提交事件并且从不调用.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 回答