文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >可以用一个函数对2个链接进行ajax调用

问可以用一个函数对2个链接进行ajax调用
EN

Stack Overflow用户
提问于 2015-01-08 01:54:26
回答 1查看 68关注 0票数 2

当我单击fetch时，我需要获取数据，但不显示在表单中，但当我单击感到幸运时，我想显示列表并填充表单。

  1. 我的逻辑在获取链接时运行得很好，对于感觉幸运的链接，我必须重复同样的逻辑吗？有没有一种优化的方法。
  2. $post# click事件在成功调用数据的每个循环中，这是正确的地方吗？

下面是下面这个片段的镜像：JSFiddle

数据

代码语言：javascript
复制
{
    tag: "urlfoodchannel,chocolate,dessert",
    searchedTags: "urlfoodchannel,chocolate,dessert|urlfoodchannel,chocolate,dessert|urlfoodchannel,chocolate,dessert",
    tagPage: "/food/urlfoodchannel,chocolate,dessert-recipes/",
    page: "2",
    pages: "2",
    total: "20",
    posts: [{
        postId: "21122896",
        postUrl: "/article/2014/12/30/chocolate-oreo-ice-cream/21122896/",
        postTitle: "Chocolate Oreo Ice Cream",
        postExcerpt: "This creamy chocolate ice cream with chunks of Oreo cookie is perfect and surprisingly easy to make!",
        postAuthor: "Marin Mama Cooks",
        postPubdate: "2014-12-30T20:49:00",
        postPubdateUnix: "1419990540",
        postImage: "http://urlcdn.com/hss/storage/midas/201316424/chocolate-oreo-ice-cream-11.jpg"
    } {
        postId: "21122797",
        postUrl: "/article/2014/12/30/sheet-pan-smores/21122797/",
        postTitle: "Sheet Pan S'mores",
        postExcerpt: "You've never had s'mores quite like this! Try this decadent and delicious recipe for sheet pan s'mores.",
        postAuthor: "Oh, Bite It",
        postPubdate: "2014-12-30T15:26:00",
        postPubdateUnix: "1419971160",
        postImage: "http://urlcdn.com/hss/storage/midas/201315673/spsbet.jpg"
    }]
}

脚本

​

代码语言：javascript
复制
$(document).ready(function () {
    $("#fetch").on("click", function () {
        tags = $("#tags").val();
        count = $("#count").val() ? $("#count").val() : "10";
        page = $("#page").val() ? $("#page").val() : "1";
        apiurl = "http://urlblog.url.com/api/tags-v1/" + tags + "?pageSize=" + count + "&page=" + page;
        $.ajax({
            type: 'GET',
            url: apiurl,
            data: {
                get_param: 'value'
            },
            success: function (data) {
                $("#tag").text(data.tagPage);
                $.each(data.posts, function (i) {
                    $("#posts").append('<li  class="post-item-' + i + '"><p class="post-title">' + data.posts[i].postTitle + ' <a href="#" class="addpost"><img class="add-row" src="/portalcms/_tool/media/add.png">+</a></p><p class="post-thumb"><img src="' + data.posts[i].postImage + '" width="150px" class="post-image"/></p><p class="post-url">' + data.posts[i].postUrl + '</p></li>');
                    $(".post-item-" + i).bind("click", function () {
                        k = i + 1;
                        tval = $(this).find(".post-title").text();
                        ival = $(this).find(".post-image").attr("src");
                        uval = $(this).find(".post-url").text();
                        $("#input-link" + k + "\\.alt").val(tval);
                        $("#input-link" + k + "\\.href").val(uval);
                        $("#input-link" + k + "\\.credit").val(ival);
                    });
                });

            }
        });
    });
});
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset class="visible">Tags for tomorrow:
    <input type="text" name="futuretags" id="future-tags" />
</fieldset>
<fieldset class="visible">Tags:
    <input type="text" name="tags" id="tags" value="" />Count:
    <input type="text" name="count" id="count" value="10" />Page:
    <input type="text" name="page" id="page" value="1" /> <a href="#" id="fetch">Fetch</a>
 <a href="#" id="luckyfetch">Feeling Lucky</a>

    <ul id="posts"></ul>
</fieldset>
<fieldset>
    <legend>Link 1:</legend>
    <ul class="inputs">
        <li class="compact quickFormField-file ">
            <label for="input-link1.src._action">Image:</label>
            <br />
            <select id="input-link1.src._action" name="link1.src._action">
                <option value="no">No File</option>
                <option value="upload">Upload a New File:</option>
                <option value="url">Use File at Asset URL:</option>
            </select> <span class="upload" style="display: none;"><input type="file" name="link1.src._upload" /></span>
 <span class="url" style="display: none;"><input type="text" name="link1.src._url" value="" /> <small>(e.g. /path/to/file.jpg)</small></span>

        </li>
        <li class="">
            <label for="input-link1.alt">Alt Text:</label>
            <input id="input-link1.alt" type="text" name="link1.alt" value="" />
        </li>
        <li class="">
            <label for="input-link1.credit">Credit:</label>
            <input id="input-link1.credit" type="text" name="link1.credit" value="" />
        </li>
        <li class="">
            <label for="input-link1.href">Href (URL):</label>
            <input id="input-link1.href" type="text" name="link1.href" value="" />
        </li>
    </ul>
    <div class="advancedgrp">
        <div class="hdr">Show Advanced Options</div>
        <fieldset class="cnt">
            <legend>Advanced Options:</legend>
            <ul class="inputs">
                <li class="">
                    <label for="input-link1.target">Target:</label>
                    <select id="input-link1.target" name="link1.target">
                        <option value="">Same Window</option>
                        <option value="_blank">New Window</option>
                    </select>
                </li>
                <li class="">
                    <label for="input-link1.onclick">Onclick:</label>
                    <input id="input-link1.onclick" type="text" name="link1.onclick" value="" />
                </li>
                <li class="">
                    <label for="input-link1.otherAtts">Other Attributes:</label>
                    <input id="input-link1.otherAtts" type="text" name="link1.otherAtts" value="" />
                </li>
                <li class="">
                    <label for="input-link1.trackKey">Tracking Key:</label>
                    <select id="input-link1.trackKey" name="link1.trackKey">
                        <option value="icid" selected="selected">icid</option>
                        <option value="ncid">ncid</option>
                    </select>
                </li>
                <li class="">
                    <label for="input-link1.trackVal">Tracking Value:</label>
                    <input id="input-link1.trackVal" type="text" name="link1.trackVal" value="" />
                </li>
            </ul>
        </fieldset>
    </div>
    <ul class="inputs"></ul>
</fieldset>
<fieldset>
    <legend>Link 2:</legend>
    <ul class="inputs">
        <li class="compact quickFormField-file ">
            <label for="input-link2.src._action">Image:</label>
            <br />
            <select id="input-link2.src._action" name="link2.src._action">
                <option value="no">No File</option>
                <option value="upload">Upload a New File:</option>
                <option value="url">Use File at Asset URL:</option>
            </select> <span class="upload" style="display: none;"><input type="file" name="link2.src._upload" /></span>
 <span class="url" style="display: none;"><input type="text" name="link2.src._url" value="" /> <small>(e.g. /path/to/file.jpg)</small></span>

        </li>
        <li class="">
            <label for="input-link2.alt">Alt Text:</label>
            <input id="input-link2.alt" type="text" name="link2.alt" value="" />
        </li>
        <li class="">
            <label for="input-link2.credit">Credit:</label>
            <input id="input-link2.credit" type="text" name="link2.credit" value="" />
        </li>
        <li class="">
            <label for="input-link2.href">Href (URL):</label>
            <input id="input-link2.href" type="text" name="link2.href" value="" />
        </li>
    </ul>
    <div class="advancedgrp">
        <div class="hdr">Show Advanced Options</div>
        <fieldset class="cnt">
            <legend>Advanced Options:</legend>
            <ul class="inputs">
                <li class="">
                    <label for="input-link2.target">Target:</label>
                    <select id="input-link2.target" name="link2.target">
                        <option value="">Same Window</option>
                        <option value="_blank">New Window</option>
                    </select>
                </li>
                <li class="">
                    <label for="input-link2.onclick">Onclick:</label>
                    <input id="input-link2.onclick" type="text" name="link2.onclick" value="" />
                </li>
                <li class="">
                    <label for="input-link2.otherAtts">Other Attributes:</label>
                    <input id="input-link2.otherAtts" type="text" name="link2.otherAtts" value="" />
                </li>
                <li class="">
                    <label for="input-link2.trackKey">Tracking Key:</label>
                    <select id="input-link2.trackKey" name="link2.trackKey">
                        <option value="icid" selected="selected">icid</option>
                        <option value="ncid">ncid</option>
                    </select>
                </li>
                <li class="">
                    <label for="input-link2.trackVal">Tracking Value:</label>
                    <input id="input-link2.trackVal" type="text" name="link2.trackVal" value="" />
                </li>
            </ul>
        </fieldset>
    </div>
    <ul class="inputs"></ul>
</fieldset>
<fieldset>
    <legend>Link 3:</legend>
    <ul class="inputs">
        <li class="compact quickFormField-file ">
            <label for="input-link3.src._action">Image:</label>
            <br />
            <select id="input-link3.src._action" name="link3.src._action">
                <option value="no">No File</option>
                <option value="upload">Upload a New File:</option>
                <option value="url">Use File at Asset URL:</option>
            </select> <span class="upload" style="display: none;"><input type="file" name="link3.src._upload" /></span>
 <span class="url" style="display: none;"><input type="text" name="link3.src._url" value="" /> <small>(e.g. /path/to/file.jpg)</small></span>

        </li>
        <li class="">
            <label for="input-link3.alt">Alt Text:</label>
            <input id="input-link3.alt" type="text" name="link3.alt" value="" />
        </li>
        <li class="">
            <label for="input-link3.credit">Credit:</label>
            <input id="input-link3.credit" type="text" name="link3.credit" value="" />
        </li>
        <li class="">
            <label for="input-link3.href">Href (URL):</label>
            <input id="input-link3.href" type="text" name="link3.href" value="" />
        </li>
    </ul>
    <div class="advancedgrp">
        <div class="hdr">Show Advanced Options</div>
        <fieldset class="cnt">
            <legend>Advanced Options:</legend>
            <ul class="inputs">
                <li class="">
                    <label for="input-link3.target">Target:</label>
                    <select id="input-link3.target" name="link3.target">
                        <option value="">Same Window</option>
                        <option value="_blank">New Window</option>
                    </select>
                </li>
                <li class="">
                    <label for="input-link3.onclick">Onclick:</label>
                    <input id="input-link3.onclick" type="text" name="link3.onclick" value="" />
                </li>
                <li class="">
                    <label for="input-link3.otherAtts">Other Attributes:</label>
                    <input id="input-link3.otherAtts" type="text" name="link3.otherAtts" value="" />
                </li>
                <li class="">
                    <label for="input-link3.trackKey">Tracking Key:</label>
                    <select id="input-link3.trackKey" name="link3.trackKey">
                        <option value="icid" selected="selected">icid</option>
                        <option value="ncid">ncid</option>
                    </select>
                </li>
                <li class="">
                    <label for="input-link3.trackVal">Tracking Value:</label>
                    <input id="input-link3.trackVal" type="text" name="link3.trackVal" value="" />
                </li>
            </ul>
        </fieldset>
    </div>
    <ul class="inputs"></ul>
</fieldset> <span id="tag"></span>

​

javascript
jquery
ajax
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-01-08 02:12:21

您只需编写javascript函数，如下所示：

代码语言：javascript
复制
$(function(){
    var searchmethods = {
        fetched : false,
        data : "",
        fetch : function(callback) {
            $.ajax({
                success: function(data) {
                    fetched = false;
                    searchmethods.data = data;
                    if($.isFunction(showResults)) showResults();
                }
            });
        },
        lucky : function() {
            if(searchmethods.fetched) {
                searchmethods.showResults();
            } else {
                searchmethods.fetch(searchmethods.showResults);
            }
        },
        showResults : function() {
            // show results
        }
    };

    $(".link").click(function(){
        var action = $(this).data("action");
        searchmethods[action].apply(this);
    });
});

我喜欢这种方式，因为您将需要的所有代码都放入一个名为searchmethods的对象中，并且它拥有这些方法。这是如何工作的：

当您单击fetch链接并使用jQuery $.ajax()方法检索数据时，会调用jQuery。

当您单击幸运链接时调用searchmethods.lucky()，检查数据是否已被检索，如果没有，则调用searchmethods.fetch()方法，它按参数传递函数searchmethods.lucky()，以便在$.ajax()检索数据后调用它。

HTML是这样的：

代码语言：javascript
复制
<a data-action="fetch" class="link">fetch</a>
<a data-action="lucky" class="link">lucky</a>

但这取决于你，这只是一个简单的方法

编辑：回答它已经更新了，很抱歉我的英语很奇怪

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/27831772

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档