jquery 如何通过 AJAX 发送HTML表单,将数据保存到文件中,并在div中显示

yhived7q  于 2022-11-22  发布在  jQuery
关注(0)|答案(2)|浏览(173)

我是Web开发的新手。我现在正在学习JavaScriptJQuery),我选择Simple Chat作为入门项目。不幸的是,我不知道如何防止页面在消息发送后刷新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
    <title>Chat</title>

    
   
</head>
<body>
   <h1>Chat room</h1>
   <div id="status"></div>
    
    <form id="send" class="ajax" action="action.php" method="POST">
         <label for="fname">Type your message</label>
         <input type="text" id="fname" name="myMessage">
         <input id="upload" type="submit" name="myButton"value="Submit" />

    </form>
    <div id="result"></div>
    <script>
    $(document).ready(function () {
  $("form").submit(function (event) {
    var formData = {
      name: $("#fname").val(),
      
    };
    var posting = $.post(url, {
  name: $('#fname').val(),
});
/* So far, just listing whether the Form has managed to prevent its classic sending */
posting.done(function(data) {
  $('#result').text('success');
});

    $.ajax({
      type: "POST",
      url: "process.php",
      data: formData,
      dataType: "json",
      encode: true,
    }).done(function (data) {
      console.log(data);
    });

    event.preventDefault();
  });
});
    </script>
    
    
</body>
</html>

PHP代码:

<?php
 $path = 'messages.txt';
 if (isset($_POST['myButton']) ) {
    $fh = fopen($path,"a");
    $string = $_POST['myMessage' ];
    fwrite($fh,$string . PHP_EOL); 
    fclose($fh); 
 }
?>

我已经创建了一个文本文件messages.txt,我想在其中保存使用 AJAX 新建的消息。我希望新添加的消息显示在聊天页面下方(在divid #result中)

kpbpu008

kpbpu0081#

谢谢 大家 的 建议 , 我 就是 这样 解决 的

$("#send").submit(function() {
  event.preventDefault();
  var $messageSent = $("#send").serialize();
       

  $.ajax({
    type: 'POST',
    url: 'action.php',
    data: $messageSent,
  });
});

中 的 每 一 个

mec1mxoz

mec1mxoz2#

要 使用 此 jquery ajax 代码 将 数据 保存 到 PHP 中 的 文件 , 请 尝试 以下 操作 :

<?php
    $path = 'messages.txt';
    if (isset($_POST['name']) ) {
      $fh = fopen($path,"w");
      $string = $_POST['name']. PHP_EOL;
      fwrite($fh,$string); 
      fclose($fh); 
    }
?>

中 的 每 一 个

相关问题