PHP ile jQuery Ajax POST örneği


682

Bir formdan bir veritabanına veri göndermeye çalışıyorum. İşte kullanıyorum formu:

<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>

Tipik yaklaşım formu göndermek olacaktır, ancak bu tarayıcının yeniden yönlendirmesine neden olur. JQuery ve Ajax kullanarak , formun tüm verilerini yakalamak ve bir PHP komut dosyasına (örnek, form.php ) göndermek mümkün müdür ?


3
Silme işleminin arkasındaki akıl yürütme için ilgili meta tartışmaya bakın .
TRiG

Basit vanilya js çözümü: stackoverflow.com/a/57285063/7910454
leonheess

Yanıtlar:


939

Temel kullanımı .ajaxşöyle görünecektir:

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);
    });

});

Not: jQuery 1.8 beri .success(), .error()ve .complete()lehine önerilmemektedir edilir .done(), .fail()ve .always().

Not: Yukarıdaki snippet'in DOM hazır olduktan sonra yapılması gerektiğini unutmayın, bu yüzden onu bir $(document).ready()işleyiciye koymalısınız (veya $()stenografi kullanın ).

İpucu: Geri arama işleyicilerini şu şekilde zincirleyebilirsiniz :$.ajax().done().fail().always();

PHP (yani, 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;

Not: Enjeksiyonları ve diğer kötü amaçlı kodları önlemek için gönderilen verileri her zaman sterilize edin .

Yukarıdaki JavaScript kodunun .postyerine kısayolu da kullanabilirsiniz .ajax:

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

Not: Yukarıdaki JavaScript kodu jQuery 1.8 ve sonraki sürümleriyle çalışacak şekilde yapılmıştır, ancak jQuery 1.5'e kadar olan önceki sürümlerle çalışmalıdır.


6
Bir hatayı düzeltmek için cevabınızı düzenledi: requestyerel bir var olarak ilan edildi ve if (request) request.abort();asla işe yaramadı.
Andrey Mikhaylov - lolmaus

23
ÇOK ÖNEMLİ bir not, çünkü bu örneği kullanmaya çalışırken çok fazla zaman harcadım / harcadım. Olayı bir $ (belge) .ready bloğu içinde bağlamalısınız VEYA bağlama işleminden önce FORM'u yüklemiş olmanız gerekir. Aksi takdirde, bağlantının neden çağrılmadığını anlamaya çalışmak için çok zaman harcıyorsunuz.
Philibert Perusse

3
@PhilibertPerusse Herhangi bir olay bağlamada olduğu gibi, ona bağlanmaya çalışmadan önce veya yetki verilen bir bağlama kullanıyorsanız, DOM'da var olan bir öğeye ihtiyacınız vardır.
mekwall

10
Evet, şimdi anlıyorum. Ama her zaman bir $ (belge) koymuş birçok örnek buldum. Benim gibi gelip bir kullanıcı için yorum yazdım ve yorum iş parçacığı ve bu acemi 'ipucu'
okuyarak bitirebilirim

5
Bunu kendi kodunuza uyguluyorsanız, 'ad' niteliklerinin girişler için kritik önem taşıdığını, aksi takdirde serialize()bunları atlayacağını unutmayın.
Ben Flynn

216

JQuery kullanarak bir Ajax isteği yapmak için , bunu aşağıdaki kodla yapabilirsiniz.

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>

JavaScript:

Yöntem 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);
        }
    });

Yöntem 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()Ve .complete()geri aramalar itibariyle kaldırılıyor jQuery 1.8 . Kodunuzu nihai olarak kaldırılmak üzere hazırlamak için şunu kullanın .done():.fail() ve .always()bunun yerine.

MDN: abort(). İstek zaten gönderildiyse, bu yöntem isteği iptal eder.

Bu yüzden başarıyla bir Ajax isteği gönderdik ve şimdi sunucuya veri alma zamanı geldi.

PHP

Bir Ajax çağrısında ( type: "post") bir POST isteği yaparken , şimdi $_REQUESTveya $_POST:

  $bar = $_POST['bar']

Ayrıca POST isteğinde ne elde ettiğinizi de görebilirsiniz. BTW, $_POSTayarlandığından emin olun . Aksi takdirde bir hata alırsınız.

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

Ve veritabanına bir değer ekliyorsunuz. Sorguyu yapmadan önce Tüm istekleri (GET veya POST yaptıysanız) doğru şekilde hassaslaştırdığınızdan veya kaçtığınızdan emin olun . En iyisi hazırlanan ifadeleri kullanmak olacaktır .

Ve herhangi bir veriyi sayfaya geri döndürmek istiyorsanız, bunu aşağıdaki gibi tekrarlayarak yapabilirsiniz.

// 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'));

Ve sonra şöyle alabilirsiniz:

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

Birkaç steno yöntemi var . Aşağıdaki kodu kullanabilirsiniz. Aynı işi yapar.

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

@Clarence bar, girdi türü metin adıdır ve postalama yöntemini dava
ettiğimden

4
Json kullanmak isteyen herkes için - JSON kullanırken çağrı şu veri parametresini içermelidirTip: 'json'
Lindberg

4
@CarlLindberg - JSQ veya başka bir formatı dataTypepotansiyel olarak kabul edebilmeniz için jQuery'nin yanıtın MIME türüne (tahmin etmediğinizde ne yapması gerekir) dayalı olarak tahmin etmesini isterseniz ne olur ?
nnnnnn

@nnnnnn haklısın - bu çok daha iyi - gerçekten varsayılan: Akıllı Tahmin
K. Kilian Lindberg

JSON yanıt nesnesine (data.returned_val) erişmek için, orijinal ajax çağrınıza dataType: "json" eklemeyi unutmayın
Adelmar

56

PHP + Ajax ile başarısızlık geri atılan hataları ile birlikte göndermek için ayrıntılı bir yol paylaşmak istiyorum.

Her şeyden önce, iki dosya oluşturun, örneğin form.phpve process.php.

İlk önce bir formyöntem oluşturacağız , daha sonra bu jQuery .ajax()yöntem kullanılarak gönderilecektir . Gerisi yorumlarda açıklanacaktır.


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>


Formu jQuery istemci tarafı doğrulamasını kullanarak doğrulayın ve verileri adresine iletin 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
    });
});

Şimdi bir göz atacağız 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);

Proje dosyaları http://projects.decodingweb.com/simple_ajax_form.zip adresinden indirilebilir .


27

Serileştirmeyi kullanabilirsiniz. Aşağıda bir örnek verilmiştir.

$("#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;
    });

2
$.parseJSON()tamamen cankurtaran, teşekkürler. Çıktımı diğer cevaplara göre yorumlamakta zorlanıyordum.
Şubat'ta foochow

21

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);
   }

18

Aşağıda gösterilen yolu kullanıyorum. Dosyalar gibi her şeyi gönderir.

$(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");
        }
    });
});

14

JQuery Ajax kullanarak veri göndermek istiyorsanız, form etiketi ve gönderme düğmesine gerek yoktur

Misal:

<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" />

10
<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>

seninki ve diğer cevabın arasındaki kimlik farkı nedir?
NullPoiиteя

11
başkaları tarafından başkaları tarafından gönderildi.
john

6

Göndermeden önce ve başarılı olduktan sonra Ajax hatalarını ve yükleyiciyi işleme bir örnekle bir uyarı önyükleme kutusu gösterir:

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);
            }
        }
    }
});

5

Bu basit bir satır kodunu yıllarca sorunsuz bir şekilde kullanıyorum (jQuery gerektirir):

<script src="http://malsup.github.com/jquery.form.js"></script> 
<script type="text/javascript">
    function ap(x,y) {$("#" + y).load(x);};
    function af(x,y) {$("#" + x ).ajaxSubmit({target: '#' + y});return false;};
</script>

Burada ap () bir Ajax sayfası ve af () bir Ajax formu anlamına gelir. Bir formda, af () işlevinin çağrılması formu URL'ye gönderir ve yanıtı istenen HTML öğesine yükler.

<form id="form_id">
    ...
    <input type="button" onclick="af('form_id','load_response_id')"/>
</form>
<div id="load_response_id">this is where response will be loaded</div>

Sunucu dosyasını eklemenizi dilerim! Nasıl test edileceği hakkında bir fikrim yok.
johny neden

4

Php dosyanıza şunu girin:

$content_raw = file_get_contents("php://input"); // THIS IS WHAT YOU NEED
$decoded_data = json_decode($content_raw, true); // THIS IS WHAT YOU NEED
$bar = $decoded_data['bar']; // THIS IS WHAT YOU NEED
$time = $decoded_data['time'];
$hash = $decoded_data['hash'];
echo "You have sent a POST request containing the bar variable with the value $bar";

ve js dosyanızda veri nesnesiyle bir ajax gönderin

var data = { 
    bar : 'bar value',
    time: calculatedTimeStamp,
    hash: calculatedHash,
    uid: userID,
    sid: sessionID,
    iid: itemID
};

$.ajax({
    method: 'POST',
    crossDomain: true,
    dataType: 'json',
    crossOrigin: true,
    async: true,
    contentType: 'application/json',
    data: data,
    headers: {
        'Access-Control-Allow-Methods': '*',
        "Access-Control-Allow-Credentials": true,
        "Access-Control-Allow-Headers" : "Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization",
        "Access-Control-Allow-Origin": "*",
        "Control-Allow-Origin": "*",
        "cache-control": "no-cache",
        'Content-Type': 'application/json'
    },
    url: 'https://yoururl.com/somephpfile.php',
    success: function(response){
        console.log("Respond was: ", response);
    },
    error: function (request, status, error) {
        console.log("There was an error: ", request.responseText);
    }
  })

veya form gönderme ile olduğu gibi saklayın. Yalnızca istemci tarafından girilen bazı form verileriyle değil, hesaplanan ek içerikle değiştirilmiş bir istek göndermek istiyorsanız buna ihtiyacınız vardır. Örneğin, bir karma, bir zaman damgası, bir kullanıcı kimliği, bir oturum kimliği ve benzerleri.


2

Lütfen bunu kontrol edin. Tam Ajax istek kodudur.

$('#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 whatever 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();
});

Aradığım şey bu.
Nirav Bhoi

2

Bu, jQuery form gönderimi hakkında bilmeniz gereken her şeyi içeren çok iyi bir makaledir .

Makale özeti:

Basit HTML Formu Gönder

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>

JavaScript:

$("#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 Çok Parçalı / Form Verileri Form Gönder

Sunucuya dosya yüklemek için, bir FormData nesnesi oluşturan ve jQuery Ajax kullanılarak sunucuya kolayca gönderilebilen XMLHttpRequest2 tarafından kullanılabilen FormData arabirimini kullanabiliriz.

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>

JavaScript:

$("#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);
    });
});

Umarım bu yardımcı olur.


2

Fetch API'sinin kullanılmaya başlanmasından bu yana, bunu jQuery Ajax veya XMLHttpRequests ile yapmak için artık bir neden yok. Form verilerini vanilya JavaScript'teki bir PHP komut dosyasına POST yapmak için aşağıdakileri yapabilirsiniz:

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>

Verileri alan ve bir e-posta gönderen bir PHP betiğinin çok temel bir örneği:

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

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

    $to = "test@example.com";
    $subject = "New name submitted";
    $body = "You received the following name: $name";

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

Internet explorer desteği jQuery AJAX kullanmaya devam etmek için bir neden olabilir
Huub S

@HuubS Neden? Sadece bir çoklu dolgu kullanın. jQuery öldü IMHO.
leonheess
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.