[jquery] Jquery AJAX를 사용하여 HTML 양식 제출

Program / 글쓴이

AJAX를 사용하여 HTML 양식을 제출하려고합니다. 이 예제를 .

내 HTML 코드 :

<form id="formoid" action="studentFormInsert.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <label class="title">Name</label>
        <input type="text" id="name2" name="name2" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

내 스크립트 :

<script type="text/javascript">
    $(document).ready(function() {
        $('#formoid').ajaxForm(function() {
            alert("Thank you for your comment!");
        });
    });
</script>

이것은 작동하지 않으며 경고 메시지도받지 못하고 제출할 때 다른 페이지로 리디렉션하고 싶지 않고 경고 메시지 만 표시하고 싶습니다.

간단한 방법이 있습니까?

추신 : 몇 개의 필드가 있습니다. 두 가지를 예로 들어 보겠습니다.

답변

AJAX에 대한 간략한 설명

AJAX는 단순히 비동기 JSON 또는 XML입니다 (대부분의 최신 상황에서 JSON). ASYNC 작업을 수행하고 있기 때문에 사용자에게보다 즐거운 UI 경험을 제공 할 것입니다. 이 특정 경우에는 AJAX를 사용하여 FORM 제출을 수행합니다.

정말 빨리 4 개 일반 웹 작업이있다 GET, POST, PUT, 그리고 DELETE; 이러한 직접 대응 SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA,와 DELETING DATA. 기본 HTML / ASP.Net webform / PHP / Python 또는 기타 form작업은 POST 작업 인 “제출”입니다. 이 때문에 아래에서 모두 POST 수행에 대해 설명합니다. 그러나 때로는 http를 사용하면 다른 작업을 원할 수 있으며 .ajax.

귀하를위한 내 코드 (코드 주석에 설명) :

/* attach a submit handler to the form */
$("#formoid").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get the action attribute from the <form action=""> element */
  var $form = $(this),
    url = $form.attr('action');

  /* Send the data using post with element id name and name2*/
  var posting = $.post(url, {
    name: $('#name').val(),
    name2: $('#name2').val()
  });

  /* Alerts the results */
  posting.done(function(data) {
    $('#result').text('success');
  });
  posting.fail(function() {
    $('#result').text('failed');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="formoid" action="studentFormInsert.php" title="" method="post">
  <div>
    <label class="title">First Name</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label class="title">Last Name</label>
    <input type="text" id="name2" name="name2">
  </div>
  <div>
    <input type="submit" id="submitButton" name="submitButton" value="Submit">
  </div>
</form>

<div id="result"></div>

스 니펫 확장

선적 서류 비치

jQuery 웹 사이트 $.post문서에서.

예 : Ajax 요청을 사용하여 양식 데이터 보내기

$.post("test.php", $("#testform").serialize());

예 : ajax를 사용하여 양식을 게시하고 결과를 div에 넣기

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <form action="/" id="searchForm">
            <input type="text" name="s" placeholder="Search..." />
            <input type="submit" value="Search" />
        </form>
        <!-- the result of the search will be rendered inside this div -->
        <div id="result"></div>
        <script>
            /* attach a submit handler to the form */
            $("#searchForm").submit(function(event) {

                /* stop form from submitting normally */
                event.preventDefault();

                /* get some values from elements on the page: */
                var $form = $(this),
                    term = $form.find('input[name="s"]').val(),
                    url = $form.attr('action');

                /* Send the data using post */
                var posting = $.post(url, {
                    s: term
                });

                /* Put the results in a div */
                posting.done(function(data) {
                    var content = $(data).find('#content');
                    $("#result").empty().append(content);
                });
            });
        </script>
    </body>
</html>

중요 사항

OAuth 또는 최소 HTTPS (TLS / SSL)를 사용하지 않고 보안 데이터 (신용 카드 번호, SSN, PCI, HIPAA 또는 로그인 관련 모든 것)에이 방법을 사용하지 마십시오.

답변

var postData = "text";
      $.ajax({
            type: "post",
            url: "url",
            data: postData,
            contentType: "application/x-www-form-urlencoded",
            success: function(responseData, textStatus, jqXHR) {
                alert("data saved")
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        })

답변

추가하는 경우 :

jquery.form.min.js

간단하게 다음과 같이 할 수 있습니다.

<script>
$('#myform').ajaxForm(function(response) {
  alert(response);
});

// this will register the AJAX for <form id="myform" action="some_url">
// and when you submit the form using <button type="submit"> or $('myform').submit(), then it will send your request and alert response
</script>

노트:

위의 게시물에서 제안한 것처럼 간단한 $ ( ‘FORM’). serialize ()를 사용할 수 있지만 FILE INPUTS … ajaxForm () 에서는 작동하지 않습니다 .

답변