Question

我是JQuery的新手。我正在查看文档和演示，但无法找到我正在寻找的答案。

我有一个按钮。 Onlick，我想将2次传球传给一个模态形式。 Onload，我想在表单中启动一个AJAX调用。 AJAX调用将从PHP脚本返回一个json对象。 json响应将作为模态形式的内容。

就像我说的，我是JQ新手。我不希望任何人在这里握住我的手，但是如果我能够做到这一点，那么有一些理由可以站稳脚跟。我想我需要弄清楚的主要事情是：如何将参数传递给模态形式;如何在表单加载时启动ajax（使用传递的值）;以及如何解析json以形成内容。

非常感谢任何帮助。

Answer 1

查看ColorBox插件。查看他们的example page，了解实施模态表单是多么容易。

如果您想要更强大的解决方案，请查看JQueryUI's Modal Form

Answer 2

这是一个基本示例，使用带有GET URL的A标记将两个值传递给PHP脚本并以JSON形式返回结果。

直播：http://jfcoder.com/test/modal.php

如果您有任何问题，请与我们联系。

<?php 

$export = array();

if ($_GET['var1'] || $_GET['var2']) {
    switch($_GET['var1']) {
        case 1:
            $export['var1'] = 'You have selected var 1 output 1.';
        break;
        case 2:
            $export['var1'] = 'You have selected var 1 output 2.';
        break;
        default:
            $export['var1'] = 'You have not selected a var 1.';
    }
    switch($_GET['var2']) {
        case 1:
            $export['var2'] = 'You have selected var 2 output 1.';
        break;
        case 2:
            $export['var2'] = 'You have selected var 2 output 2.';
        break;
        default:
            $export['var2'] = 'You have not selected a var 2.';
    }
}

if ($_GET['ajax'] == 1) {
    echo json_encode($export);
    exit;
}

?>
<html>
<head>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('div#modal a').click(function(){
        showModal(this.href);
        return false;
    });
});

function showModal(show) {
    $.ajax({
        url : show + '&ajax=1',
        dataType : 'json',
        success : function(data){
            var html = "<h3>Vars selected</h3><p>"+data.var1+"</p><p>"+data.var2+"</p>";
            $('#dialog').html(html).dialog({modal:true});
        } 
    });
}
</script>
</head>
<body>
<div id="dialog" title="Basic dialog"></div>
<?php 
if (count($export)) {
    echo "
<h2>Var 1: {$export['var1']}</h2>
<h2>Var 2: {$export['var2']}</h2>
";
}
?>
<div id="modal">
<a href="http://jfcoder.com/test/modal.php?var1=1&amp;var2=1">Var 1 - output 1</a><br/>
<a href="http://jfcoder.com/test/modal.php?var1=1&amp;var2=2">Var 1 - output 2</a><br/>
<a href="http://jfcoder.com/test/modal.php?var1=2&amp;var2=1">Var 2 - output 1</a><br/>
<a href="http://jfcoder.com/test/modal.php?var1=2&amp;var2=2">Var 2 - output 2</a><br/>
</div>
</body>
</html>

创建一个JQuery模式表单

2 个答案: