如何通过AJAX将converter.php返回结果渲染到Bootstrap Modal中

免责声明：我过去3天查阅了Stack Overflow上的相关帖子，未找到完全匹配我问题的答案，请不要直接关联已有回答，烦请先阅读完整问题内容。 #

问题描述 #

现有一个提交表单，用户输入USD数值提交后可兑换为BTC，但当前提交后会直接跳转到新页面converter.php。

预期解决方案 #

不跳转到converter.php页面，提交后通过AJAX请求获取converter.php的返回结果，将其展示在Bootstrap Modal模态框中。

index.php现有代码 #

<form action="converter.php" method="post">
  <h1>USD to BTC - Converter</h1>
  <p>
    <label for="amount">USD金额</label>
    <input type="text" name="amount" id="amount">
  </p>
  <p>
    <label for="currency">币种</label>
    <select name="currency" id="currency">
      <option value="USD">USD</option>
    </select>
  </p>
  <p>
    <input type="submit" name="submit" value="提交">
  </p>
</form>

参考示例 #

下方是和需求高度相似的可运行示例，功能均正常，可将二者结合，实现将PHP返回结果展示在模态框中的效果：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<form id="form" method="post">
  <div id="userDiv">
    <label>输入数字</label>
    <input type="text" name="userId" id="userId"/> <br>
  </div>
  <button type="button" id="btn" class="btn btn-info" data-toggle="modal" data-target="#myModal">发送数据</button>
</form>

<!--modal-->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">我的模态框</h4>
      </div>
      <div class="modal-body">
        此处需展示converter.php文件的echo响应内容
        <div id="bingo"></div>
      </div>
    </div>
  </div>
</div>

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
  $(document).ready(function(){
    $("#btn").click(function(){
      var vUserId = $("#userId").val();
      if(vUserId=='') {
        alert("请输入数字");
      } else {
        $.post("result.php",
          {
            user:vUserId,
          },
          function(response,status){
            $("#bingo").html(response);
            $("#form")[0].reset();
          }
        );
      }
    });
  });
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

内容的提问来源于stack exchange，提问作者Mark