javascript - 在提交时将值传递给变量后尝试更改页面内容而不重新加载

Question

使用 Php 从 API 检索数据。这是我的代码:

<?php
if(isset($_POST['search'])) 
{
    $login = 'something';
    $password = 'something';
    $query = urlencode( $_POST[ "search"]);
    $url = 'something' . $query;;
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL,$url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
    curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
    curl_setopt($ch, CURLOPT_USERPWD, $login . ":" . $password);
    $result = curl_exec($ch);
    curl_close($ch); 
    $output = json_decode($result, true);

    foreach ($output['response']['customers']['customer'] as $r)
        {
            $inner = $r['lifetime_points'];   
        };
 } 
  else 
 {
      echo ("No search query has received");
 }
?>

HTML 代码:

 <div id="get_text" >
<div><em>CHECK YOUR POINTS</em></div>
<div ><em>Enter mobile number</em></div>
<form action='' method='POST' id='search-form'>
<div> 
<input type='search' name='search' id="sub1" />
</div>
<div>
<button type="submit"  id="sub" >Submit</button>
</div>
</form>
</div>

<div id="show_text" >
<div><em>YOUR CURRENT POINTS ARE </em></div>
<form action='' method='GET' id='result'>
<div> 
<input type='text' name='points' value="<?php echo $inner; ?>"/>
</div>
</form>
</div>

因此，通过 AJAX，我最初使用 ID=get_text 显示我的 div 标签，其中我从 API 检索数据并在按提交后将其存储在变量中。按提交后，我将使用 id=get_text 隐藏 div 标签，并使用 id=show_text 显示 div 标签。

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript">
     $(document).ready(function () {
    $("#show_text").hide();
    $("#sub").on("click", function (e) {
        e.preventDefault();
        $.ajax({
            url: 'aristocracy-test.php',
            method: 'POST',
            data : $("#get_text").serialize(), //pass your form elements as key-value pairs
            success: function (response) {
                $("#show_text").show();
                $("#get_text").hide();
            }
        });
    });
});
 </script>

我面临的问题是，在隐藏 id=get_text 的 div 标签时按下提交按钮后，该值没有传递到 ID=show_text 的 div 标签。我的 API 代码没有任何问题，因为我在实现 AJAX 之前已经对其进行了测试。

Answer 1

我认为您在显示 div 后忘记设置对 div 的响应。请在显示 div 后添加 $("#show_text").html(response);。

如果你想在文本框中显示结果。使用

$('input[name="textboxname"]').val( response ) ;

那么你的代码就会像这样。

success: function (response) {
                $("#show_text").show();
                $('input[name="textboxname"]').val(response) ;
                $("#get_text").hide();
            }