Javascript 自定义输入框行为
我有一些简单的HTML：Javascript 自定义输入框行为,javascript,html,jquery-ui,jquery,Javascript,Html,Jquery Ui,Jquery,我有一些简单的HTML： First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> 名字： 姓氏： 我希望使用JQuery提交此表单，并将输入的内容存储在数据库中。页面在不刷新的情况下将更新以显示： <p>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
名字：
姓氏：
<p>Thanks for submitting $fname + $lname</p>
感谢您提交$fname+$lname
对我来说，最好的方法是什么？如何使用JQuery实现这一点？有更好的选择吗？使用PHP很简单，但我希望它尽可能具有交互性，我的示例只是对我将要使用的内容的一个非常简单的表示：）。您可以使用jQuery Ajax 非常简单：首先，您需要在head标记中添加jQuery文件，如下所示：
<!-- Add jquery library -->
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btnSubmit").click(function(){
var fname = $("#fname").val();
var lname = $("#lname").val();
$.ajax({
url : "updateDb.php", // php file where you write your mysql query to store value
type : "POST", // POSTmethod
data : {"fistname":fname,"lastname":lname},
success : function(n){
// after success you can alert popup here
// also set you cookies here
// I have also function for set cookie through javascript
setCookie("username",fname,30);
}
});
});
});
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
</script>
</head>
<!-- Now your HTML code -->
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br>
<input type="button" value="Submit" id="btnSubmit">
<!-- Note : if you use input type=submit then page must load.so you need to remove that and use only button -->
$（文档）.ready（函数（）{
$（“#btnsupmit”）。单击（函数（）{
var fname=$（“#fname”）.val（）；
var lname=$（“#lname”）.val（）；
$.ajax({
url:“updateDb.php”//php文件，您可以在其中编写mysql查询来存储值
类型：“POST”、//POSTmethod
数据：{“fistname”：fname，“lastname”：lname}，
成功：功能（n）{
//成功后，您可以在此处弹出警报
//你也可以在这里吃饼干
//我还有一个通过javascript设置cookie的函数
setCookie（“用户名”，fname，30）；
}
});
});
});
函数setCookie（c_名称、值、exdays）
{
var exdate=新日期（）；
exdate.setDate（exdate.getDate（）+exdays）；
var c_value=escape（value）+（exdays==null）？“”：“expires=“+exdate.toutString（））；
document.cookie=c_name+“=”+c_值；
}
名字：
姓氏：