it-swarm-ko.tech

jQuery Ajax POST 예제와 함께 PHP

양식에서 데이터베이스로 데이터를 보내려고합니다. 여기에 제가 사용하는 양식이 있습니다 :

<form name="foo" action="form.php" method="POST" id="foo">
    <label for="bar">A bar</label>
    <input id="bar" name="bar" type="text" value="" />
    <input type="submit" value="Send" />
</form>

전형적인 접근 방식은 양식을 제출하는 것이지만, 브라우저가 리디렉션됩니다. jQuery와 Ajax 를 사용하면 모든 양식의 데이터를 캡처하여 PHP 스크립트 (예 : form.php )에 제출할 수 있습니까?

623
Thew

.ajax 의 기본 사용법은 다음과 같습니다.

HTML :

_<form id="foo">
    <label for="bar">A bar</label>
    <input id="bar" name="bar" type="text" value="" />

    <input type="submit" value="Send" />
</form>
_

jQuery :

_// Variable to hold request
var request;

// Bind to the submit event of our form
$("#foo").submit(function(event){

    // Prevent default posting of form - put here to work in case of errors
    event.preventDefault();

    // Abort any pending request
    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);

    // Let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");

    // Serialize the data in the form
    var serializedData = $form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);

    // Fire off the request to /form.php
    request = $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData
    });

    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // Log a message to the console
        console.log("Hooray, it worked!");
    });

    // Callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // Log the error to the console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });

    // Callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // Reenable the inputs
        $inputs.prop("disabled", false);
    });

});
_

참고 : jQuery 1.8부터 .success(), .error().complete().done(), .fail().always()을 위해 더 이상 사용되지 않습니다.

참고 : 위의 스 니펫은 DOM 준비 후에 완료해야하므로 $(document).ready() 핸들러 안에 넣거나 $() 속기를 사용하십시오. =

팁 : chain 콜백 핸들러는 다음과 같습니다. $.ajax().done().fail().always();

PHP (즉, form.php) :

_// You can access the values posted by jQuery.ajax
// through the global variable $_POST, like this:
$bar = isset($_POST['bar']) ? $_POST['bar'] : null;
_

참고 : 항상 게시 된 데이터를 삭제 주입 및 기타 악성 코드를 방지합니다.

위의 JavaScript 코드에서 _.post_ 대신에 속기 .ajax 을 사용할 수도 있습니다.

_$.post('/form.php', serializedData, function(response) {
    // Log the response to the console
    console.log("Response: "+response);
});
_

참고 : 위의 JavaScript 코드는 jQuery 1.8 이상에서 작동하도록 만들어졌지만 이전 버전에서는 jQuery 1.5까지 작동해야합니다.

906
mekwall

jQuery 를 사용하여 Ajax 요청을하려면 다음 코드를 사용하면됩니다.

HTML :

<form id="foo">
    <label for="bar">A bar</label>
    <input id="bar" name="bar" type="text" value="" />
    <input type="submit" value="Send" />
</form>

<!-- The result of the search will be rendered inside this div -->
<div id="result"></div>

자바 스크립트 :

방법 1

 /* Get from elements values */
 var values = $(this).serialize();

 $.ajax({
        url: "test.php",
        type: "post",
        data: values ,
        success: function (response) {

           // You will get response from your PHP page (what you echo or print)
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });

방법 2

/* Attach a submit handler to the form */
$("#foo").submit(function(event) {
    var ajaxRequest;

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

    /* Clear result div*/
    $("#result").html('');

    /* Get from elements values */
    var values = $(this).serialize();

    /* Send the data using post and put the results in a div. */
    /* I am not aborting the previous request, because it's an
       asynchronous request, meaning once it's sent it's out
       there. But in case you want to abort it you can do it
       by abort(). jQuery Ajax methods return an XMLHttpRequest
       object, so you can just use abort(). */
       ajaxRequest= $.ajax({
            url: "test.php",
            type: "post",
            data: values
        });

    /*  Request can be aborted by ajaxRequest.abort() */

    ajaxRequest.done(function (response, textStatus, jqXHR){

         // Show successfully for submit message
         $("#result").html('Submitted successfully');
    });

    /* On failure of request this function will be called  */
    ajaxRequest.fail(function (){

        // Show error
        $("#result").html('There is error while submit');
    });

.success(), .error().complete() 콜백은 jQuery 1.8 에서 더 이상 사용되지 않습니다. 최종 제거를 위해 코드를 준비하려면 .done(), .fail().always()을 대신 사용하십시오.

MDN: abort() . 요청이 이미 전송 된 경우이 메소드는 요청을 중단합니다.

이제 Ajax 요청을 성공적으로 보냈으며 이제 서버로 데이터를 가져갈 차례입니다.

PHP

Ajax 호출 (type: "post")에서 POST 요청을하면 $_REQUEST 또는 $_POST를 사용하여 데이터를 가져올 수 있습니다.

  $bar = $_POST['bar']

POST 요청에서 무엇을 얻는 지 간단히 확인할 수 있습니다. BTW, $_POST가 설정되어 있는지 확인하십시오. 그렇지 않으면 오류가 발생합니다.

var_dump($_POST);
// Or
print_r($_POST);

그리고 당신은 데이터베이스에 값을 삽입하고 있습니다. 쿼리하기 전에 민감화 또는 탈출 모든 요청 (GET 또는 POST를 수행했는지 여부)을 올바르게 확인하십시오. 가장 좋은 방법은 준비된 문장 을 사용하는 것입니다.

그리고 데이터를 다시 페이지로 되돌리려면 아래와 같이 해당 데이터를 에코하면됩니다.

// 1. Without JSON
   echo "Hello, this is one"

// 2. By JSON. Then here is where I want to send a value back to the success of the Ajax below
echo json_encode(array('returned_val' => 'yoho'));

그리고 당신은 그것을 얻을 수 있습니다 :

 ajaxRequest.done(function (response){
    alert(response);
 });

몇 가지 속기 방법 이 있습니다. 아래 코드를 사용할 수 있습니다. 같은 작업을 수행합니다.

var ajaxRequest= $.post("test.php", values, function(data) {
  alert(data);
})
  .fail(function() {
    alert("error");
  })
  .always(function() {
    alert("finished");
});
204
NullPoiиteя

오류 발생시 다시 발생하는 PHP + Ajax를 게시하는 방법에 대해 자세히 설명하고 싶습니다.

먼저 form.phpprocess.php와 같은 두 개의 파일을 만듭니다.

먼저 form을 만들고 jQuery.ajax() 메소드를 사용하여 제출합니다. 나머지는 설명에서 설명 할 것입니다.


form.php

<form method="post" name="postForm">
    <ul>
        <li>
            <label>Name</label>
            <input type="text" name="name" id="name" placeholder="Bruce Wayne">
            <span class="throw_error"></span>
            <span id="success"></span>
       </li>
   </ul>
   <input type="submit" value="Send" />
</form>


JQuery 클라이언트 측 유효성 검사를 사용하여 양식의 유효성을 검사하고 데이터를 process.php로 전달하십시오.

$(document).ready(function() {
    $('form').submit(function(event) { //Trigger on form submit
        $('#name + .throw_error').empty(); //Clear the messages first
        $('#success').empty();

        //Validate fields if required using jQuery

        var postForm = { //Fetch form data
            'name'     : $('input[name=name]').val() //Store name fields value
        };

        $.ajax({ //Process the form using $.ajax()
            type      : 'POST', //Method type
            url       : 'process.php', //Your form processing file URL
            data      : postForm, //Forms name
            dataType  : 'json',
            success   : function(data) {
                            if (!data.success) { //If fails
                                if (data.errors.name) { //Returned if any error from process.php
                                    $('.throw_error').fadeIn(1000).html(data.errors.name); //Throw relevant error
                                }
                            }
                            else {
                                    $('#success').fadeIn(1000).append('<p>' + data.posted + '</p>'); //If successful, than throw a success message
                                }
                            }
        });
        event.preventDefault(); //Prevent the default submit
    });
});

이제 우리는process.php

$errors = array(); //To store errors
$form_data = array(); //Pass back the data to `form.php`

/* Validate the form on the server side */
if (empty($_POST['name'])) { //Name cannot be empty
    $errors['name'] = 'Name cannot be blank';
}

if (!empty($errors)) { //If errors in validation
    $form_data['success'] = false;
    $form_data['errors']  = $errors;
}
else { //If not, process the form, and return true on success
    $form_data['success'] = true;
    $form_data['posted'] = 'Data Was Posted Successfully';
}

//Return the data back to form.php
echo json_encode($form_data);

프로젝트 파일은 http://projects.decodingweb.com/simple_ajax_form.Zip 에서 다운로드 할 수 있습니다.

48
Mr. Alien

Serialize를 사용할 수 있습니다. 아래는 그 예입니다.

$("#submit_btn").click(function(){
    $('.error_status').html();
        if($("form#frm_message_board").valid())
        {
            $.ajax({
                type: "POST",
                url: "<?php echo site_url('message_board/add');?>",
                data: $('#frm_message_board').serialize(),
                success: function(msg) {
                    var msg = $.parseJSON(msg);
                    if(msg.success=='yes')
                    {
                        return true;
                    }
                    else
                    {
                        alert('Server error');
                        return false;
                    }
                }
            });
        }
        return false;
    });
26
user2610222

HTML:

    <form name="foo" action="form.php" method="POST" id="foo">
        <label for="bar">A bar</label>
        <input id="bar" class="inputs" name="bar" type="text" value="" />
        <input type="submit" value="Send" onclick="submitform(); return false;" />
    </form>

JavaScript :

   function submitform()
   {
       var inputs = document.getElementsByClassName("inputs");
       var formdata = new FormData();
       for(var i=0; i<inputs.length; i++)
       {
           formdata.append(inputs[i].name, inputs[i].value);
       }
       var xmlhttp;
       if(window.XMLHttpRequest)
       {
           xmlhttp = new XMLHttpRequest;
       }
       else
       {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
       xmlhttp.onreadystatechange = function()
       {
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
          {

          }
       }
       xmlhttp.open("POST", "insert.php");
       xmlhttp.send(formdata);
   }
20
DDeme

이 방법을 사용합니다. 파일과 같은 모든 것을 제출합니다.

$(document).on("submit", "form", function(event)
{
    event.preventDefault();

    var url=$(this).attr("action");
    $.ajax({
        url: url,
        type: 'POST',
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {
            console.log("error");

        }
    });        

});
16
Shaiful Islam
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<form method="post" id="form_content" action="Javascript:void(0);">
    <button id="desc" name="desc" value="desc" style="display:none;">desc</button>
    <button id="asc" name="asc"  value="asc">asc</button>
    <input type='hidden' id='check' value=''/>
</form>

<div id="demoajax"></div>

<script>
    numbers = '';
    $('#form_content button').click(function(){
        $('#form_content button').toggle();
        numbers = this.id;
        function_two(numbers);
    });

    function function_two(numbers){
        if (numbers === '')
        {
            $('#check').val("asc");
        }
        else
        {
            $('#check').val(numbers);
        }
        //alert(sort_var);

        $.ajax({
            url: 'test.php',
            type: 'POST',
            data: $('#form_content').serialize(),
            success: function(data){
                $('#demoajax').show();
                $('#demoajax').html(data);
                }
        });

        return false;
    }
    $(document).ready(function_two());
</script>
9
john

jquery Ajax를 사용하여 데이터를 보내려면 양식 태그와 제출 버튼이 필요 없다.

예:

<script>
    $(document).ready(function () {
        $("#btnSend").click(function () {
            $.ajax({
                url: 'process.php',
                type: 'POST',
                data: {bar: $("#bar").val()},
                success: function (result) {
                    alert('success');
                }
            });
        });
    });
</script>
<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input id="btnSend" type="button" value="Send" />
9
Juned Ansari

제출하기 전에 아약스 오류 및 로더를 처리하고 성공을 표시 한 후 예를 들어 경보 부트 상자 표시 :

var formData = formData;

$.ajax({
    type: "POST",
    url: url,
    async: false,
    data: formData, //only input
    processData: false,
    contentType: false,
    xhr: function ()
    {
        $("#load_consulting").show();
        var xhr = new window.XMLHttpRequest();
        //Upload progress
        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = (evt.loaded / evt.total) * 100;
                $('#addLoad .progress-bar').css('width', percentComplete + '%');
            }
        }, false);
        //Download progress
        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
            }
        }, false);
        return xhr;
    },
    beforeSend: function (xhr) {
        qyuraLoader.startLoader();
    },
    success: function (response, textStatus, jqXHR) {
        qyuraLoader.stopLoader();
        try {
            $("#load_consulting").hide();

            var data = $.parseJSON(response);
            if (data.status == 0)
            {
                if (data.isAlive)
                {
                    $('#addLoad .progress-bar').css('width', '00%');
                    console.log(data.errors);
                    $.each(data.errors, function (index, value) {
                        if (typeof data.custom == 'undefined') {
                            $('#err_' + index).html(value);
                        }
                        else
                        {
                            $('#err_' + index).addClass('error');

                            if (index == 'TopError')
                            {
                                $('#er_' + index).html(value);
                            }
                            else {
                                $('#er_TopError').append('<p>' + value + '</p>');
                            }
                        }

                    });
                    if (data.errors.TopError) {
                        $('#er_TopError').show();
                        $('#er_TopError').html(data.errors.TopError);
                        setTimeout(function () {
                            $('#er_TopError').hide(5000);
                            $('#er_TopError').html('');
                        }, 5000);
                    }
                }
                else
                {
                    $('#headLogin').html(data.loginMod);
                }
            } else {
                //document.getElementById("setData").reset();
                $('#myModal').modal('hide');
                $('#successTop').show();
                $('#successTop').html(data.msg);
                if (data.msg != '' && data.msg != "undefined") {

                    bootbox.alert({closeButton: false, message: data.msg, callback: function () {
                            if (data.url) {
                                window.location.href = '<?php echo site_url() ?>' + '/' + data.url;
                            } else {
                                location.reload(true);
                            }
                        }});
                } else {

                    bootbox.alert({closeButton: false, message: "Success", callback: function () {
                            if (data.url) {
                                window.location.href = '<?php echo site_url() ?>' + '/' + data.url;
                            } else {
                                location.reload(true);
                            }
                        }});
                }

            }
        } catch (e) {
            if (e) {
                $('#er_TopError').show();
                $('#er_TopError').html(e);
                setTimeout(function () {
                    $('#er_TopError').hide(5000);
                    $('#er_TopError').html('');
                }, 5000);
            }
        }
    }
});
4
pawan sen

나는 문제없이 수년간이 간단한 한 줄 코드를 사용하고있다. (jquery가 필요합니다)

<script type="text/javascript">
function ap(x,y) {$("#" + y).load(x);};
function af(x,y) {$("#" + x ).ajaxSubmit({target: '#' + y});return false;};
</script>

여기서 ap ()는 ajax 페이지를 의미하고 af ()는 ajax 양식을 의미합니다. 폼에서 단순히 af () 함수를 호출하면 url에 양식을 게시하고 원하는 html 요소에 대한 응답을로드합니다.

<form>
...
<input type="button" onclick="af('http://example.com','load_response')"/>
</form>
<div id="load_response">this is where response will be loaded</div>
3
Uchiha Itachi

안녕하세요, 이것이 완전한 아약스 요청 코드인지 확인하십시오.

        $('#foo').submit(function(event) {
        // get the form data
        // there are many ways to get this data using jQuery (you can use the 
    class or id also)
    var formData = $('#foo').serialize();
    var url ='url of the request';
    // process the form.

    $.ajax({
        type        : 'POST', // define the type of HTTP verb we want to use
        url         : 'url/', // the url where we want to POST
        data        : formData, // our data object
        dataType    : 'json', // what type of data do we expect back.
        beforeSend : function() {
        //this will run before sending an ajax request do what ever activity 
         you want like show loaded 
         },
        success:function(response){
            var obj = eval(response);
            if(obj)
            {  
                if(obj.error==0){
                alert('success');
                }
            else{  
                alert('error');
                }   
            }
        },
        complete : function() {
           //this will run after sending an ajax complete                   
                    },
        error:function (xhr, ajaxOptions, thrownError){ 
          alert('error occured');
        // if any error occurs in request 
        } 
    });
    // stop the form from submitting the normal way and refreshing the page
    event.preventDefault();
});
1
Waseem Bashir

이것은 아주 좋은 기사 이며 jQuery 양식 제출에 대해 알아야 할 모든 것을 포함합니다.

기사 요약 :

간단한 HTML 양식 제출

HTML :

<form action="path/to/server/script" method="post" id="my_form">
    <label>Name</label>
    <input type="text" name="name" />
    <label>Email</label>
    <input type="email" name="email" />
    <label>Website</label>
    <input type="url" name="website" />
    <input type="submit" name="submit" value="Submit Form" />
    <div id="server-results"><!-- For server results --></div>
</form>

자바 스크립트 :

$("#my_form").submit(function(event){
    event.preventDefault(); // Prevent default action
    var post_url = $(this).attr("action"); // Get the form action URL
    var request_method = $(this).attr("method"); // Get form GET/POST method
    var form_data = $(this).serialize(); // Encode form elements for submission

    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data
    }).done(function(response){ //
        $("#server-results").html(response);
    });
});

HTML 멀티 파트/양식-데이터 양식 제출

서버에 파일을 업로드하기 위해 XMLHttpRequest2에 사용 가능한 FormData 인터페이스를 사용하여 FormData 객체를 구성하고 jQuery Ajax를 사용하여 서버로 쉽게 전송할 수 있습니다.

HTML :

<form action="path/to/server/script" method="post" id="my_form">
    <label>Name</label>
    <input type="text" name="name" />
    <label>Email</label>
    <input type="email" name="email" />
    <label>Website</label>
    <input type="url" name="website" />
    <input type="file" name="my_file[]" /> <!-- File Field Added -->
    <input type="submit" name="submit" value="Submit Form" />
    <div id="server-results"><!-- For server results --></div>
</form>

자바 스크립트 :

$("#my_form").submit(function(event){
    event.preventDefault(); // Prevent default action
    var post_url = $(this).attr("action"); // Get form action URL
    var request_method = $(this).attr("method"); // Get form GET/POST method
    var form_data = new FormData(this); // Creates new FormData object
    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data,
        contentType: false,
        cache: false,
        processData: false
    }).done(function(response){ //
        $("#server-results").html(response);
    });
});

이게 도움이 되길 바란다.

0
Supun Praneeth

Fetch API 의 도입 이후 jQuery Ajax 또는 XMLHttpRequests로 더 이상 그렇게 할 이유가 없습니다. Vanilla JavaScript에서 PHP 스크립트로 데이터를 POST하려면 다음을 수행 할 수 있습니다.

function postData() {
    const form = document.getElementById('form');
    const data = new FormData();
    data.append('name', form.name.value);

    fetch('../php/contact.php', {method: 'POST', body: data}).then(response => {
        if (!response.ok){
            throw new Error('Network response was not ok.');
        }
    }).catch(err => console.log(err));
}
<form id="form" action="javascript:postData()">
    <input id="name" name="name" placeholder="Name" type="text" required>
    <input type="submit" value="Submit">
</form>

다음은 데이터를 가져와 이메일을 보내는 PHP 스크립트의 매우 기본적인 예입니다.

<?php
    header('Content-type: text/html; charset=utf-8');

    if (isset($_POST['name'])) {
        $name = $_POST['name'];
    }

    $to = "[email protected]";
    $subject = "New name submitted";
    $body = "You received the following name: $name";

    mail($to, $subject, $body);
0
MiXT4PE