在不重新加载页面的情况下请求内容[关闭]

Posted 2023-03-05

【中文标题】在不重新加载页面的情况下请求内容[关闭]

【英文标题】：Requesting content without reloading the page [closed]

【发布时间】：2012-07-12 18:29:22

【问题描述】：

我想使用select 元素在移动设备上查看我的网站。以下是select 选项。

HTML：

<select name="select-choice-8" id="select-choice-nc">
        <optgroup label="News">
            <option value="feature">Fea</option>
            <option value="current">Current</option>
            <option value="research">Research</option>
        </optgroup>

        <optgroup label="Archive">
            <option value="archive">Archive</option>
        </optgroup>

        <optgroup label="Video">
            <option value="">Video</option>
        </optgroup>

        <optgroup label="Submit">
            <option value="">Story</option>
            <option value="">Event</option>
        </optgroup>
    </select>

我想使用 javascript / jQuery 根据用户选择的内容执行一些 AJAX 调用，以避免重新加载整个页面（例如，用返回的 AJAX 内容填充容器）。

我需要一些想法或例子来解决这个问题。

提前致谢。

【问题讨论】：

没有人会为您编写代码。查看一些 jQuery tutorials and read through the documentation 并在遇到特定问题或问题时回来。

究竟是什么问题？我在您的帖子中没有看到任何问题。

我只是想让想法开始。你能指定我查看jquery网站的确切位置吗？

@jmoerdyk - 我有包含不同新闻文章的索引页面，并且使用 optgroup 我想通过单击特定选项来显示特定文章。

他只是想在选择一个选项时插入 html（使用 AJAX）（@ak1481 在你的帖子中写这个）。

【参考方案1】：

我对 jQuery 不是很熟悉，但您可以找到正确的语法。 这个想法只是根据您选择的选项获取适当的 HTML。也就是它对应的值。

考虑 testHTML：

<div id="News"></div>
<div id="Archive"></div>
<div id="Video"></div>

还有 JavaScript：

$.each("option").click(function() 
    var label = $(this).parent.label;
    var elementToUpdate = $( "#" + label ); // one of the divs in TestHTML
    var value = (this).value;
    var url = "http://mysite.php?id=" + value;
    var newHTML = $.ajax( url: url ).done(function()
        elementToUpdate.replaceWith( newHTML );
    );
);

甚至可能：

<div id="selectedContent"></div>

和

$.each("option").click(function() 
    var elementToUpdate = $( "#selectedContent" ); // one of the divs in TestHTML
    var value = (this).value;
    var url = "http://mysite.php?id=" + value;
    var newHTML = $.ajax( url: url ).done(function()
        elementToUpdate.replaceWith( newHTML );
    );
);

【参考方案2】：

试试这个：http://shaquin.tk/experiments/select-ajax2.html。

HTML：

<select name="select-choice" id="select-choice">
    <optgroup label="News">
        <option value="feature">Feature</option>
        <option value="current">Current</option>
        <option value="research">Research</option>
    </optgroup>
    <optgroup label="Archive">
        <option value="archive">Archive</option>
    </optgroup>
    <optgroup label="Video">
        <option value="video">Video</option>
    </optgroup>
    <optgroup label="Submit">
        <option value="story">Story</option>
        <option value="event">Event</option>
    </optgroup>
</select>
<div id="article">Please select an article to view.</div>

JS：

var origText = '';
$(document).ready(function() 
    origText = $('#article').text();
    $('select').on('change', changed);
);
function changed(e) 
    $('#article').html('<span class="loading">Loading...</span>');
    $('#article').load('content.php', $.param(0: e.target.value, 1: origText));

PHP：

<?php
$selected = $_GET[0];
$articles = array(
        '' => $_GET[1],
        'feature' => 'Feature article goes here',
        'current' => '<p>Lorem ipsum dolor sit amet, denique laetare ... se est Apollonius.</p>',
        'research' => 'You selected <code>research</code>',
        'archive' => 'Archives',
        'video' => '<div style="font-size:48pt;font-weight:bold;font-style:italic;background:red;text-align:center;padding:20px;margin:10px;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;">Video</div>',
        'story' => 'Submit a story',
        'event' => 'Submit an event'
    );
$article = $articles[$selected];
echo $article;
?>

CSS（可选）：

body 
    background: #ccc;
    text-align: center

#article 
    padding: 30px;
    margin: 20px;
    text-align: left;
    background: #eee;
    text-shadow: 1px 1px #fff;
    text-shadow: 0 0 3px #fff;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;

.loading 
    text-transform: uppercase;
    font-size: 15pt;
    text-shadow: 1px 1px #f00, 1px 2px #f00, 2px 2px #f00, 3px 3px #f00;

在 PHP 中，您可能希望从数据库中获取文本：PHP - mysqli。

【讨论】：

谢谢沙昆。我为此使用 ASP.NET MVC。另外，我在 Index.cshtml 中的视图文件名我可以在加载功能上使用 .cshtml 扩展文件吗？

@ak1481 - 可以，只要返回正确的内容即可。 GET 参数0 包含选定的选项value，GET 参数1 包含原始文本（在它被替换之前）。 （至少对于 PHP，GET 参数是 0 和 1）。