Question

我有一些简单的HTML：

First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">

我想要做的是使用JQuery提交此表单并存储在数据库中输入的内容。没有刷新的页面将更新为显示：

<p>Thanks for submitting $fname + $lname</p>

我还希望创建一个cookie，这样如果同一个用户访问该网站，它将始终显示此消息，而不是强迫他们多次查看输入表单。

对我来说，最好的方法是什么？我怎么能用JQuery做到这一点？还有更好的选择吗？使用PHP很简单，但我希望它尽可能具有交互性，我的例子只是一个非常简单的表示我将拥有的东西：）。

Answer 1

您可以使用jQuery Ajax。

这非常简单：首先，您需要在头标记中添加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 -->

自定义输入框行为

1 个答案: