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

如何使用

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>

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

另一方面，使用：

$post_1 = $_POST['post1'];

要获取
post1
值。
我假设您的表单元素的id为
form
，因为
您用来触发通过ajax post提交表单的事件的按钮不应该是submit类型！否则，此操作将始终失败。
您实际尝试过什么吗？因为我们不是一个代码编写社区。我们将检查您的代码并帮助您解决问题。但我们不会编写您的代码。此外，要真正做到这一点，有太多的方法。有一些jQuery插件可以做到这一点，也许你想看看。我不是想说得卑鄙或其他什么。@CharlotteDunois我试过
，
你需要为submit
上的属性
提供一个javascript函数或小代码。取消表单提交或返回默认值false@epascarello如何在表单code上使用
preventDefault
，谢谢！所以点击按钮我必须调用
函数（）
，什么是
post1和post2
？很抱歉，我是一个新手如果你想在URL上发布任何数据，这样你就可以操纵它，那么你必须以这种方式传递它们。假设您正在进行登录表单身份验证，您需要传递用户名和密码以与数据库中的用户名和密码进行比较；在这种情况下，单击登录按钮时，您将传递这些值。希望它是清楚的。
$('#formId').on('submit', function (e) {
});

$post_1 = $_POST['post1'];

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