jQuery Ajax POST の例 PHP

Question

フォームからデータベースにデータを送信しようとしています。これが私が使っているフォームです：

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

Answer 1

.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() ハンドラーの内側に入れる（または$()の省略形を使う）必要があります。

Tip：このようなコールバックハンドラは 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までは動作するはずです。

Answer 2

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>

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 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]リクエストで取得したものを確認することもできます。ところで、$_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");
});

Answer 3

私はPHP + Ajaxで投稿するための詳細な方法と失敗時にスローされるエラーを共有したいと思います。

まず最初に、form.phpとprocess.phpのように2つのファイルを作成します。

最初に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 からダウンロードできます。

Answer 4

シリアライズを使うことができます。以下は一例です。

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

Answer 5

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

Answer 6

私はこの方法を使用します。それはファイルのようにすべてを提出します

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

        }
    });        

});

Answer 7

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

Answer 8

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

Answer 9

送信前および送信成功後のajaxエラーおよびローダーの処理

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

Answer 10

この単純な1行のコードを何年も問題なく使用しています。 （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>

Answer 11

こんにちは、これが完全な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();
});

Answer 12

これは 非常に良い記事 であり、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>

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 Multipart/form-data Form Submit

サーバーにファイルをアップロードするには、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>

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

これがお役に立てば幸いです。

Answer 13

Fetch API の導入以来、jQuery AjaxまたはXMLHttpRequestsでこれを行う理由はもうありません。 Vanilla JavaScriptでPOSTフォームデータをPHPスクリプトにするには、次のことができます。

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