使用Ajax在提交表单不起作用时保持在同一页面上

Using Ajax to stay on the same page upon submiting form not working

本文关键字：一页 Ajax 提交 表单 不起作用 使用      更新时间：2023-09-26

我正在尝试创建一个表单，当您提交表单时，您会停留在同一页面上，并将用户输入发送到Process.php和我的数据库。我面临的问题是页面刷新或打开页面Process.php

我的表单

<form action="process.php" method="post" class="copy" id="formid" enctype="multipart/form-data">
    Project name: <input type="text" name="name"> <br>

        Video: 
        <input type="text" rows="1" cols="40" name="video">
    <br> 
    Svar 1<input type="text" name="answerswer1"/> 
    <select name="point1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <br>
    Svar 2<input type="text" name="answerswer2"/> 
    <select name="point2">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <br>
    Svar 3<input type="text" name="answerswer3"/> 
    <select name="point3">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <br>
    Svar 4<input type="text" name="answerswer4"/> 
    <select name="point4">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <br>

       <br>
    <input type="submit" name="submit" value="create question" id="submit">
    </form>

Process.php

<?php
// Exempel 1: Lägga till 
if (isset($_POST['submit'])){
$localhost = "localhost";
$username = "root";
$password = "";
$connect = mysqli_connect($localhost, $username, $password)or 
die("Kunde inte koppla");
mysqli_select_db($connect, 'wildfire');

$name=$_POST['name'];
$video=$_POST['video'];
$answer1=$_POST['answer1'];
$answer2=$_POST['answer2'];
$answer3=$_POST['answer3'];
$answer4=$_POST['answer4'];
$point1=$_POST['point1'];
$point2=$_POST['point2'];
$point3=$_POST['point3'];
$point4=$_POST['point4'];


$sql1= "INSERT INTO question (answer, point) VALUES ('$answer1', '$point1')";
$result=$connect->query($sql1);
$sql2= "INSERT INTO question (answer, point) VALUES ('$answer2', '$point2')";
$result=$connect->query($sql2);
$sql3= "INSERT INTO question (answer, point) VALUES ('$answer3', '$point3')";
$result=$connect->query($sql3);
$sql4= "INSERT INTO question (answer, point) VALUES ('$answer4', '$point4')";
$result=$connect->query($sql4);
print $sql1;
print $sql2;
print $sql3;
print $sql4;
}

?>

Javascript

$(function () {
        $('form').on('submit', function (e) {
          e.preventDefault();
          $.ajax({
            type: 'post',
            url: 'process.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
        });
      });

也许这会解决这个问题（从另一个SO问题中复制答案，并将学分记入@HarveyARamer）：

我的最佳猜测是，您正在添加您的form提交侦听器在实际呈现表单之前。尝试将jQuery包装在中$(document).ready(function () {})；

您可能对表单执行了操作。如果您对表单执行操作，它将打开您在操作中指定的页面。尝试删除表单的操作属性如果您给

在ajax成功之后而不是在启动ajax 之前尝试防止默认

$(function () {
    $('form').on('submit', function (e) {
      $.ajax({
        type: 'post',
        url: 'process.php',
        data: $('form').serialize(),
        success: function () {
          alert('form was submitted');
          e.preventDefault();
        }
      });
    });
  });

Html

使用类型作为按钮而不是提交

<input type="button" name="submit" value="create question" id="submit">

Javascript

点击功能使用以下功能

$('#submit').click(function(e){
     e.preventDefault();
          $.ajax({
            type: 'post',
            url: 'process.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
        });
相关文章：