单击 php/JavaScript 中的保存帖子时需要弹出窗口

Question

我正在学习 PHP/JavaScript，我需要一些帮助：我的 HTML 和 PHP 编码：

<h1>ItemsAreSh1t V<?= ItemsAreSh1t_version ?></h1>
<form method="post">
<input type="checkbox" name="dorun" value="run" <?=     isset($settings['dorun']) ? 'checked' : ''; ?>>&nbsp;Run<br>
Codes of the items:
Separate with | - ie. AJK|c1K|d01<br><textarea name="giftcodes" cols="50"><?     = $settings['giftcodes']; ?></textarea><br/>
<input type="submit" name="save" value="Save Settings">
</form>


<form id="frmsearch" method="post" name="form_search"  onsubmit="xmlhttpPost('index.php', 'form_search', 'searchresults', '', '<img  src=\'img/indicator.white_1.gif\'>'); return false;"> 
<input type="hidden" name="formtype" value="search"> <b>Search:</b>&nbsp;
<input type="text" size=10 name="search">&nbsp; 
<select name="type">
<option value="any">Any</option>
<option value="animal">Animal</option>
<option value="tree">Tree</option>
<option value="building">Building</option>
<option value="decoration">Ring/Deco</option>
<option value="vehicle">Vehicle</option>
</select>
<input type="hidden" name="userId" value="<?= $_SESSION['userId']; ?>">
<input type="submit" name="submit" value="Search"></form>
</div>
<div id="searchresults"></div>

并且还使用 JavaScript 来清除搜索结果：

<script type="text/javascript" src="/js/ajaxsbmt.js"></script>
<script type="text/javascript">
    function ClearSearch(id){
        obj = document.getElementById(id);
        obj.innerHTML = "";
     }  
</script>

在 PHP 中清除搜索结果：

    echo '<a href="#" onclick="ClearSearch(\'searchresults\');">Clear Search Results</a>'; #on click clear result

现在，我想在带有表格设计的弹出窗口中获取搜索结果...

Answer 1

首先，您可能想查看AJAX（来自related post 的sn-p）将数据发送到服务器，对其进行处理并将响应发送回浏览器。纯JS：

<script type="text/javascript">
function loadXMLDoc() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
           if(xmlhttp.status == 200){
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if(xmlhttp.status == 400) {
              alert('There was an error 400')
           }
           else {
               alert('something else other than 200 was returned')
           }
        }
    }

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}
</script>

其次，技术被称为模态窗口或对话窗口 - 看起来像警报窗口 (JS) 但实际上是 HTML JS 等）。有多种方法可以做到，仅举几例：

1. 引导程序 - http://getbootstrap.com/javascript/#modals
2. jQuery - https://jqueryui.com/dialog/