如何使用AJAX和POST方法提交数据

How can I post the following form using Ajax. When submitting the form that page refreshes and I want to avoid that.

如何使用Ajax发布以下表单。在提交表单时，页面会刷新，我想避免这种情况。

<form method="post" action="" > 
    <div class="rp-donation-block checkout_donation" >
        <p class="message"><strong><?php echo $this->get_setting('message'); ?></strong></p>
        <div class="input text">
            <input type="text" value="<?php echo $amount; ?>" class="input-text text-donation" name="donation-amount">
            <input type="submit" value="<?php echo $this->get_setting('btn_lable'); ?>" class="button" name="donate-btn">
        </div>
    </div>
</form>

I tried both of these with no luck.

这两种我都试过了，但运气不好。

<form method="post" action="" onSubmit="return false">
<form method="post" action="" action= "<?php echo $_SERVER['PHP_SELF']; ?>">

3 个解决方案

#1

I suppose your form element has id of form as <form id="form"...

我假设您的表单元素的id为

<script>
// Attach a submit handler to the form
$( "#form" ).submit(function( event ) {

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

// Get some values from elements on the page:
var $form = $( this ),
donate_amount = $form.find( "input[name='donation-amount']" ).val(),
url = $form.attr( "action" );

// Send the data using post
var posting = $.post( url, { amount: donate_amount } );

// Put the results in message div
  posting.done(function( data ) {
    var message_returned = $( data ).find( "#message" ); //hope your are returning message, also you can return other things like message type and create message on frontend as accordingly
    $( ".message" ).empty().append( message_returned ); //adding returned message to your message div
  });
});
</script>

#2

A form is not mandatory to post using Ajax. You can write an Ajax request using just a button click as well.

表单不是强制使用Ajax发布的。您也可以使用单击按钮来编写Ajax请求。

$(function () {
    $('#buttonId').on('click', function (e) {
        $.ajax({
            type: "POST",
            cache: false,
            url: <url_name>, //some php file where you may hit the database and want to modify content
            data:{'post1': <post1value>,'post2': <post2value>},
            datatype: "JSON", // can be html or text as well
            success: function (data) {
                var actualData = $.parseJSON(data); // if in case of JSON
            }
        });
    });
});

If you want to invoke only on form submission you can write your Ajax like so.

如果您只想在表单提交上调用，那么您可以像这样编写Ajax。

$('#formId').on('submit', function (e) {
});

On the other side use :

另一方面使用:

$post_1 = $_POST['post1'];

To Get post1 value.

post1价值。

#3

The button you are using to trigger the event that causes the submit of the form via ajax post should not be of type submit! Else this will always fail.

您用于触发通过ajax post提交表单的事件的按钮不应该是submit类型!否则这将永远失败。

#1