Javascript：允许用户在提交表单时写入会话，但无需重新加载页面

Question

根据要求，我希望允许用户在提交表单时写入会话，但无需重新加载页面，这是我到目前为止所做的：

JavaScript函数：

$(function() {
$("#body").submit(function(){
var name = $("#player_name").val();
var dataString = 'player_name='+ name
alert (dataString);return false; 
   $.ajax({
      type: "POST",
      url: "session_update.php",
      data: dataString,
      success: function(){
        $('#body').html("<div id='message'></div>");  
        $('#message').html("<h2>Logged in!</h2>");
      });
   }
});
   return false;
});

我正在尝试提交的表格：

    <div class="body">
<div class="home" id="home" style="width:100%">
    <form action="" name="login">
    USERNAME: <input type="text" id="player_name" name="player_name"/>
          <br>
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
         </form>
<? echo "value=". $_SESSION['player_name'];?>
</div>

php文件将其数据发送到：

<?php
start_session();
$_SESSION['player_name']= $_POST["player_name"];
?>

任何建议，我们将不胜感激，这在编码方面是相当新的，因此可能是造成它的明显原因，但我只是看不到它。

有关更多信息，请告诉我。

更新

控制台显示？player_name = User＆send：75

Answer 1

您需要使用session_start(); 不是start_session()

始终确保手动测试PHP脚本，而不仅仅是使用ajax指向页面。 转到它并确保它可以工作。 :-)

如果您对此进行了测试（假设error_reporting处于打开状态），您将收到一条错误消息，指出您试图调用未定义的函数。

更新

除了session_start()问题外，您的代码中可能还存在其他问题。

第一步是使用console.log('hello');进行调试console.log('hello'); 或alert('hello') 。 将这些操作绑定到表单Submit事件，这将告诉您是否正在调用Submit函数。

完成此操作后，您可以继续调试其余的:-)

更新2

从查看jQuery来看，您似乎将submit事件附加到DOM中的错误元素。 您需要将其附加到表单，而不是div。 像这样：

$(function() {
    $("#form").submit(function(){
        var name = $("#player_name").val();
        var dataString = 'player_name='+ name
        $.ajax({
          type: "POST",
          url: "session_update.php",
          data: dataString,
          success: function(){
            $('#body').html("<div id='message'></div>");  
            $('#message').html("<h2>Logged in!</h2>");
          });
        }
    });
});

和

<div class="body">
    <div class="home" id="home" style="width:100%">
        <form id="form" action="" name="login">
            USERNAME:<input type="text" id="player_name" name="player_name"/><br>
            <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
        </form>
        <? echo "value=". $_SESSION['player_name'];?>
    </div>

提示：使用CSS分隔元素，请勿使用br标签。 只是我的观点 ：-）

Answer 2

also remove return false from the middle of your code


$(function() {
$("#body").submit(function(){
var name = $("#player_name").val();

   $.ajax({
      type: "POST",
      url: "session_update.php",
      data: {player_name:name},
      success: function(){
        $('#body').html("<div id='message'></div>");  
        $('#message').html("<h2>Logged in!</h2>");
      });
   }
});
   return false;
});

Answer 3

您将事件附加到不正确的元素。

在js更改

$("#body").submit(function(){

至

$("#myform").submit(function(){

在HTML

<form action="" name="login">

至

<form id='myform' action="" name="login">

您还存在一些语法错误，已在此处修复：

$(function() {
$("#myform").submit(function(){
var name = $("#player_name").val();
var dataString = 'player_name='+ name;
alert (dataString);
   $.ajax({
      type: "POST",
      url: "session_update.php",
      data: {player_name: name},
      success: function(){
        $('body').append("<div id='message'></div>");  
        $('#message').html("<h2>Logged in!</h2>");
      }//here was )
   });
     return false;
});//  |
  //   \/return was here
});​

工作实例

主要技巧-使用开发控制台（按F12）调试代码

Answer 4

如果您不想提交表格：

1. 将submit_btn的type =“ submit”更改为type =“ button”。
2. 将session_update.php页面的AJAX调用绑定到submit_btn click事件。

Answer 5

你可以试试这个吗 我认为问题出在您的点击事件上。

$(function() {

    $("#submit_btn").click(function(){
    var name = $("#player_name").val();
    var dataString = 'player_name='+ name
    alert (dataString);return false; 
           $.ajax({
              type: "POST",
              url: "session_update.php",
              data: dataString,
              success: function(){
                $('#body').html("<div id='message'></div>");  
                $('#message').html("<h2>Logged in!</h2>");
              });
           }
    });

});