본문 바로가기
MySql

MySQL PHP MySQL에서 jQuery AJAX를 사용하여 다시로드하지 않고 양식 제출

by 베이스 공부 2020. 11. 7.
반응형

PHP를 사용하여 SQL 데이터베이스에 데이터를 제출하는 기본 가입 / 로그인 페이지가 있습니다. 그러나 jQuery AJAX의 도움으로 (성공 여부에 관계없이) 제출시 페이지를 리디렉션하지 않기를 바랍니다.

이것은 내가 현재 가지고 있으며 작동하지 않습니다. 오류 메시지는 표시되지 않습니다.

HTML-signup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Signup</title>
    <meta charset="utf-8">
</head>
<body>
    <form>
        <table>
            <tbody>
                <tr>
                    <td>
                        <input type="text" name="first" placeholder="First Name" id="first">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="last" placeholder="Last Name" id="last">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" value="Signup" id="signup">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

자바 스크립트-signup.js

function submit() {
    $("form").submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'signup.php',
            data: $('form').serialize(),
            success: function() {
                console.log("Signup was successful");
            },
            error: function() {
                console.log("Signup was unsuccessful");
            }
        });
    });
}

$(document).ready(function() {
    submit();
});

PHP-signup.php

<?php
  include_once "db_connect.php";

  $post_FirstName = $_POST['first'];
  $post_LastName = $_POST['last'];

  $addData = "INSERT INTO details (firstname, lastname) VALUES ('$post_FirstName', '$post_LastName')";

  if ($conn->query($addData) === TRUE) {
    echo "Working";
  } else {
    echo "Not working";
  }
?>


여러분이 도와 주시기를 바랍니다. 미리 감사드립니다 :)

 

해결 방법

 

ajax를 사용하는 경우 submit 로 입력 유형을 사용할 필요가 없습니다. button 을 사용하십시오.

$(document).ready(function() {
$("#signup").click(function(e) {
    e.preventDefault();
    $.ajax({
  type: 'POST',
  url: 'signup.php',
  data: $('form').serialize()
  success: function() {
    console.log("Signup was successful");
  }
  error: function() {
    console.log("Signup was unsuccessful");
  }
});
});

여기에서도 변경

$post_FirstName = $_POST['first']; // name is `first` not `firstname`

 

참조 페이지 https://stackoverflow.com/questions/37019309

 

 

반응형

댓글