最近做一个小项目，刚好需要用到搜索功能，实现搜索框内输入数据然后按回车或者点击“提交”，然后给后台数据库处理并返回数据给前端，在前端局部更新数据。
但是遇到了一个小问题，就是form表单下任意输入框输入完按回车提交，整个页面都会刷新，就算我用ajax从后台取出数据返回前端把页面更新了，整个页面还是会立马刷新成原来的样子。
问题和ajax其实并没有太大关系。是js部分要进行一定的转换。
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#form1").submit(function ()
{
$("#show").text("444");
}); $("#form2").submit(function ()
{
$("#show").text("777");
//中间可以做一些ajax数据交互，让"777"为后台返回的值
return false;
}); $("#btn").click(function ()
{
$("#show").text("555");
}); $("#num3").keydown(function(e)
{
//按下键盘触发函数
if(e.keyCode==13)
{
//如果按下的是回车
$("#show").text("666"); //处理事件
}
});
})
</script>
</head>
<body>
<form id="form1">
表单一：<input type="text">
<input type="submit" value="在左侧输入框按回车或点击此按钮，可以看到文本值333一闪而过为444又回到333">
</form> <form id="form2">
表单二：<input type="text">
<input type="submit" value="在左侧输入框按回车或点击此按钮，可以看到文本值333改为777不变回去">
</form> 独立输入框（按回车更新文本为666）：<input type="text" id="num3">
<br> <button id="btn">点击更改文本值为555</button>
<span id="show">333</span>
</body>
</html>
界面：
首先form不能有action跳转，有action跳转是肯定会更新或者跳转到其他页面的
方法一：给form表单写一个onsubmit函数，在最后加一句：return false; 如果不加return false，提交页面时，整个页面会立马刷新，数据改变只是一闪而过；
方法二：不用<input type="submit">的方式，改为设置一个button按钮，让用户通过手动点击按钮来实现数据更改。
此问题归根结底与ajax并没有直接关系，ajax只是前后端交互的一种手段，最后还是要通过前端来实现数据部分更新的。这个问题是前端的问题。