可以使 ajax 使用一个函数调用 2 个链接

Question

我点fetch的时候，需要的是fetch出来的数据，但是不显示在form中，但是碰巧点的时候想显示list，填表。

我的获取链接的逻辑运行良好，我是否必须重复同样的操作以获得幸运链接？有没有优化的方法来做到这一点。
$post-item-# click 事件在每次循环成功调用数据里面，那个地方做对了吗？

这是下面代码段的镜像：JSFiddle

数据

{
    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"
    }]
}

脚本

$(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);
                    });
                });

            }
        });
    });
});

<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>

Answer 1

你可以做的就是像这样编写 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 并且它具有方法。这是如何工作的：

searchmethods.fetch() 在您单击提取 link 时调用，并检索 jQuery $.ajax() 方法的数据。

searchmethods.lucky()在点击幸运link时调用，检查数据是否已经检索到，如果没有，则它调用 searchmethods.fetch() 方法并通过参数传递函数 searchmethods.lucky()，以便在 $.ajax() 检索数据后调用它

和 HTML 这样的：

<a data-action="fetch" class="link">fetch</a>
<a data-action="lucky" class="link">lucky</a>

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

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

可以使 ajax 使用一个函数调用 2 个链接

possible to make ajax call for 2 links with one function

javascript

ajax

jquery

数据

脚本