无法通过AJAX来传递一种形式的输入值

Question

我有一个表格，负责执行搜索（@fiddle）

<form class="pull-right" id="generate" > 
    <input type="text" id="name" class="search-query"> 
    <button type="submit" value="submit">Find</button> 
</form> 

当搜索将得到执行的结果应该得到显示在该div

<div id="prod_search">       
</div> 

要执行我想通过Ajax通过在表单的输入字段中输入到另一个脚本（t_searchmenu.php）的值的搜索

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
$("#generate").submit(function(e){ 
var name= $(this).find('#name').val();; 
    alert(name); 
    $.ajax({ 
    type:"post", 
    url:"t_searchmenu.php", 
    data:{"name":name}, 
    cache:false, 
    success: function(returndata){ 
     $('#prod_search').html(returndata); 
     console.log(returndata) 
    } 
    }); 
    return false; 
}); 
</script> 

t_searchmenu.php代码

<?php 
$name = $_REQUEST['name']; 
echo $name; 
?> 

但问题是，我没有得到在控制台的任何结果或错误。

注：在小提琴是越来越显示警告框里面的价值，但由于某种原因它是没有得到显示在我的网页

Answer 1

的问题是，在getElementByID的D应该是小写。 getElementByID是无效的语法。

使用getElementById（注意小写d）而不是getElementByID。

var name= document.getElementById('name').value; 

我也建议使用jQuery的方法

var name= $('#name').val(); 

在情况下，如果你有重复的ID，

var name= $(this).find('#name').val(); 

此外，添加name到input

<input type="text" name="name" id="name" class="search-query"> 

Answer 2

您必须更改

document.getElementByID('name').value; 

到

document.getElementById('name').value; 

Answer 3

$("#generate").submit(function(e){ 
    var name= document.getElementById('name').value; 
    $.ajax({ 
    type:"post", 
    url:"test2.php", 
    data:{"name":name}, 
    cache:false, 
    success: function(html){ 
     $('#prod_search').html(html); // here `html` come not `returndata` 
     console.log(html) 
    } 
    }); 
    return false; 
}); 

你的Ajax返回的数据存储在html在成功函数参数，所以你必须使用html代替returndata

Answer 4

您可以使用jQuery serialize()方法在窗体上传递它的值。

$("#generate").serialize(); 

Answer 5

使用下面的代码尝试 -

<script> 
 
$("#generate").submit(function(e){ 
 
    var name= document.getElementById('name').value; 
 
    $.ajax({ 
 
    type:"post", 
 
    url:"t_searchmenu.php", 
 
    data:{"name":name}, 
 
    cache:false, 
 
    success: function(returndata){ 
 
     $('#prod_search').html(returndata); 
 
     console.log(returndata) 
 
    } 
 
    }); 
 
    return false; 
 
}); 
 
</script>