it-swarm.asia

مسج اياكس 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>

مسج:

// 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() / معالج (أو استخدام $() اختصار).

نصيحة: يمكنك سلسلة معالجات رد الاتصال مثل هذا: $.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;

ملاحظة: دائمًا قم بتعقيم البيانات المنشورة ، لمنع الحقن وغيرها من الأكواد الضارة.

يمكنك أيضًا استخدام الاختصار .post بدلاً من .ajax في رمز JavaScript أعلاه:

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

ملاحظة: تم إنشاء شفرة JavaScript أعلاه للعمل مع jQuery 1.8 والإصدارات الأحدث ، ولكن يجب أن تعمل مع الإصدارات السابقة وصولاً إلى jQuery 1.5.

887
mekwall

لتقديم طلب ajax باستخدام jQuery يمكنك القيام بذلك عن طريق الرمز التالي

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:

الطريقة 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 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 cab be abort 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

أثناء قيامنا بطلب POST في استدعاء ajax (type: "post") ، يمكننا الآن الحصول على البيانات باستخدام إما $_REQUEST أو $_POST

  $bar = $_POST['bar']

يمكنك أيضًا رؤية ما تحصل عليه POST بالطلب ببساطة إما ، تأكد من ضبط $ _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" );
});
197
NullPoiиteя

أرغب في مشاركة طريقة مفصلة لكيفية النشر مع PHP + Ajax مع الأخطاء التي تم إلقاءها على الفشل.

بادئ ذي بدء ، قم بإنشاء ملفين ، على سبيل المثال form.php و process.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

يمكنك استخدام التسلسل. أدناه مثال.

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

أنا أستخدم رمز سطر واحد بسيط لسنوات دون مشكلة. (يتطلب مسج)

<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

مرحبًا يرجى التحقق من هذا هو رمز طلب ajax الكامل.

        $('#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