Question

我正在开发一个HTML项目。它通过API和jQuery获得股票价格。但是，当我尝试使用<form>属性进行提交时，它会刷新页面。如何防止刷新？

addStock（）;做一个简单的jQuery请求。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Stock Market Game PRE ALPHA BETA</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<form onsubmit="addStock()">
    </form>


    <input type="text" name="stock">
    <br>
    <br>
    <input type="submit" value="Get Price">
  </body>

...我的其余代码和addStock（）

</html>

如果你想要我的addStock（）代码，那就是：

<script>
    var Market = {};
    var Stocks = [];
    Market.GetQuote = function(ssymbol, fCallback) {
        this.symbol = ssymbol;
        this.fCallback = fCallback;
        this.DATA_SRC = "http://dev.markitondemand.com/Api/v2/Quote/jsonp";
        this.makeRequest();
    }
    Market.GetQuote.prototype.handleSuccess = function(jsonResult) {
        this.fCallback(jsonResult);
    }
    Market.GetQuote.prototype.handleError = function(jsonResult) {
        console.error(jsonResult);
    }
    Market.GetQuote.prototype.makeRequest = function() {
        //Abort any open requests
        if (this.xhr) {
            this.xhr.abort();
        }
        //Start a new request
        this.xhr = $.ajax({
            data: {
                symbol: this.symbol
            },
            url: this.DATA_SRC,
            dataType: "jsonp",
            success: this.handleSuccess,
            error: this.handleError,
            context: this
        });
    };
    function addStock() {
        var xForm = document.forms[0];
        var xField = xForm.elements[0];
        alert("Stock: " + xField.value);

        Stocks.push(new Market.GetQuote(xField.value.toString(), function jsonResult() {
            //Gotta catch all the errors
            if (!jsonResult || jsonResult.Message) {
                console.error("Error: ", jsonResult.Message);
                return;
            }
            //If it works lets return that json!
            return jsonResult;


        }));
        alert(new Market.GetQuote(xField.value, function jsonResult() {
            if (!jsonResult || jsonResult.Message) {
                console.error("Error: ", jsonResult.Message);
                return;
            }
            console.log(jsonResult);
            return jsonResult[2];

        }));


      new Markit.QuoteService(xField.value, function (jsonResult) {

//Catch errors
if (!jsonResult || jsonResult.Message) {
    console.error("Error: ", jsonResult.Message);
    return;
}
//If all goes well, your quote will be here.
console.log(jsonResult);

/**
* Need help? Visit the API documentation at:
* http://dev.markitondemand.com
*/
});
    };
</script>

Answer 1

尝试替换input type="submit"所附events "click" onsubmit为handler的事件属性form;在form中使用.on( events [, selector ] [, data ], handler )来阻止form提交的默认操作

请参阅Event.preventDefault()

每个<form> <input type="text" name="stock"> <br> <br> <input type="submit" value="Get Price"> </form>元素都有一个计划导航，它是null或a   4.10.22.3 Form submission algorithm;首次创建$("input[type=submit]").on("click", function(event) { event.preventDefault(); addStock() })时，其task必须为。{1}}   设为null。在下面描述的行为中，当用户代理是   它需要计划导航到特定的资源目的地   必须执行以下步骤：



如果表单具有非空计划导航，请将其从中删除   任务队列。



让表单的计划导航成为包含的新任务   运行以下步骤：



让表单的计划导航为空。



planned navigation目标浏览目的地的上下文。如果replace为true，则必须使用替换来导航目标浏览上下文   启用。


出于此任务的目的，目标浏览上下文和替换是在整个表单提交时设置的变量   运行算法时，它们的值与此计划时的值一致   导航排队。


将作为表单新计划导航的任务排队。


此任务的任务源是DOM操作任务源。

行为如下：

变异操作网址让查询成为使用application / x-www-form-urlencoded编码对表单数据集进行编码的结果   算法，解释为US-ASCII字符串。

将已解析的操作的查询组件设置为查询。

让目标成为通过应用网址序列化程序形成的新网址   算法解析动作。

Navigate到目的地。

HTML

test_string = "abc"
print(len(test_string)) # prints 3

foo = test_string[3] # causes error because characters are at indexes 0 - 2
                     # 3 is out of range

的jQuery

for

在HTML上提交时阻止刷新

1 个答案: