PHP - 提交按钮并在不刷新的情况下获取值

Question

您好，我想获取此输入的值并使用 ajax 完全没有数据库来获取它。谢谢你。我怎么能用ajax呢？

<form method="POST">
   <input type="text" name="input" id="card-code" value='<?php echo $code ?>' class="form-control">

   <input type="text" id="card-pin" value='<?php echo $code2 ?>' class="form-control" maxlength="3">
 </form>

这是我的输入，这是按钮。

           <form action="top-up.php" method="POST"> 


                    </div>
                </div>

                <div class="col-md-6" style="margin-top: -160px">

                        <div class="caption">

                        <div class="jumbotron">

                        <textarea class="form-control text-center" id="scanned-QR" name="lblQrTxt" onchange = "change()"></textarea><br><br><br>

                           <input class="btn btn-primary btn-lg" type="submit" name="btnSubcode" value="PROCESS"></input>
                        </div>

                        </div>
                </div>
            </div>
             </form>

所以最终输出不会刷新页面，文本区域值将发送到文本框

Answer 1

jQuery 表单插件允许您轻松且不显眼地升级 HTML 表单以使用 AJAX。主要方法 ajaxForm 和 ajaxSubmit 从表单元素收集信息以确定如何管理提交过程。

http://malsup.com/jquery/form/#getting-started

$(document).ready(function() { 
    // bind 'myForm' and provide a simple callback function 
    $('#myForm').ajaxForm(function() { 
        alert("Thank you for your comment!"); 
    }); 
}); 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    

<form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>

// prepare Options Object 
var options = { 
    target:     '#divToUpdate', 
    url:        'comment.php', 
    success:    function() { 
        alert('Thanks for your comment!'); 
    } 
}; 

// pass options to ajaxForm 
$('#myForm').ajaxForm(options);

Answer 2

首先，重写你的html代码如下：

<form id="form" action="top-up.php" method="POST"> 


                    </div>
                </div>

                <div class="col-md-6" style="margin-top: -160px">

                        <div class="caption">

                        <div class="jumbotron">

                        <textarea class="form-control text-center" id="scanned-QR" name="lblQrTxt"></textarea><br><br><br>

                           <input class="btn btn-primary btn-lg js-form-submit" type="submit"></input>
                        </div>

                        </div>
                </div>
            </div>
             </form>

那么，你可以写成这样的JS：

$(document).on('click','.js-form-submit', function (e) {
    e.preventDefault();
    var formData = $('#form').serialize();
    var url = $('#form').attr('action');
    $.ajax({
        type: "POST",
        cache: false,
        url: url // Your php url here
        data : formData,
        dataType: "json",
        success: function(response) {
             //var obj = jQuery.parseJSON(response); if the dataType is not specified as json uncomment this
             // do what ever you want with the server response
        },
        error: function() {
          alert('error handling here');
        }
    });
});