Question

我有一个文本输入，用户可以在其中执行搜索（对于数据库中保存的用户名或电子邮件地址）。我已经有了一个PHP脚本来进行搜索等。

我想在Bootstrap 3模式中显示搜索结果 - 如果没有，则显示错误消息。

我很难理解这样做的全部逻辑。

到目前为止我所拥有的：

搜索输入和按钮：

<input type="text" name="search">
<button id="searchBtn">Search</button>

PHP函数（可通过/ajax/search/访问），它接受POST数据（例如$_POST['search']），查询数据库。此时返回一个数组 - 如果没有结果则为空。

运行东西的正确顺序是什么？我知道我需要将搜索输入传递给/ajax/search/。但我还需要打开一个模态 - 这些都可能是在点击搜索（searchBtn）时完成的。我首先使用jquery的ajax方法提交表单，然后成功打开模态吗？

为了使问题更加复杂，一旦显示此模态，就会在找到的用户旁边显示一系列复选框。这需要张贴在其他地方......但我还没有达到这个目的。

我很难理解这一点，并且已经阅读了一些帖子，例如Bootstrap 3 with remote Modal和Placing the results of a form post into a modal in Bootstrap 3

如果有任何教程显示这一点，请有人指出我，因为我找不到一个，特别是在没有标记“已被弃用”的情况下。

Answer 1

要考虑的一个简单示例：

<强> JS

$('#myModal').on('shown.bs.modal', function() {
  $(".modal-body").html("Loading...");
  $.ajax({
    url: "/path/to/request",
    data: { 
         // Parameters if needed
    },
    method: "POST",
    success: function(data) {
      $(".modal-body").html(data);
    }
  })
});

示例（模型）：

https://jsfiddle.net/4bkhLatg/

Answer 2

我明白了你的反对意见。 Bootstrap只是你的＆＃34;显示＆＃34;，但是在查看Bootstrap来教导＆＃34; go get＆＃34;它的一部分，经过的公共汽车上丢失了好吃的东西。跳转到这个非常简单的外部Ajax示例：

http://www.w3schools.com/jquery/ajax_ajax.asp

然后（隐藏）更新（隐藏#div1）：

$("#div1").html(result);

你调用你的bootstrap模态来显示（隐藏）div：

$('#div1').modal('show')

Bootstrap 3 - 以模态显示ajax搜索结果，然后将模式发布到其他位置

2 个答案: