HTML

üzerinde gönderirken ferahlığı önleme Bir HTML projesinde çalışıyorum. Bir API ve jQuery aracılığıyla hisse senedi fiyatı alır. Ancak, <form> özniteliğiyle göndermeye çalıştığımda, sayfayı yeniler. Yenilemeyi nasıl önleyebilirim?HTML

addStock(); Basit bir jQuery isteği yapar. Eğer addStock için kodumu() istiyorsanız

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

... benim kodu ve addStock() geri kalanı

</html>

budur:

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

kaynak

2016-04-09 Christopher

.on(events [, selector ] [, data ], handler) bağlı ikame deneyin onsubmit olay özniteliği için events'un "click" olduğu input type="submit"; handler içinde Event.preventDefault() kullanılarak

Her form eleman null veya bir task ya bir planlanan navigasyon sahiptir 4.10.22.3 Form submission algorithm

Bkz form teslim varsayılan eylemi önlemek için; form ilk oluşturulduğunda, planned navigation, null değerine ayarlanmış olmalıdır. Kullanıcı aracısı, belirli bir kaynak hedefe gitmek için plan gereklidir aşağıda açıklanan davranışlar, olarak, aşağıdaki adımları çalıştırmalısınız: Form boş olmayan planlı navigasyon varsa

kaldırmak görev sırasından.

formun planlanan navigasyon boş olalım:

formun planlanan navigasyon aşağıdaki adımları çalışan oluşan yeni bir görev olsun. Hedefe göz atma hedefine hedefleme

Değiştirme doğruysa, o zaman hedef tarama içeriğinin değiştirilmesi değiştirmeli olarak hareket ettirilmelidir.

Bu görev, hedef tarama bağlamı amaçları doğrultusunda
ve değiştirme genel form gönderme algoritma çalıştırıldığında bu navigasyon kuyruğa planlandığı zaman durdu olarak değerlerle, kuruldu değişkenlerdir.

Formun yeni planlanmış gezinti görevidir.

bu görev için görev Kaynak DOM manipülasyon görev kaynağıdır.

Mutate işlemi URL'si Let sorgu formu verileri kodlayan sonucu bir US olarak yorumlanır uygulama/x-www-form-urlencoded kodlama algoritması kullanılarak set aşağıdaki gibi

davranışlar
olan ASCII dizesi.

Ayrıştırılan eylemin sorgu bileşenini sorgulamak için ayarlayın.

Hedef ayrıştırılmış eylem için URL serileştiricisi algoritması uygulanarak oluşturulmuş yeni bir URL olsun. Hedef için

Plan to navigate.

html

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

jQuery

$("input[type=submit]").on("click", function(event) { 
    event.preventDefault(); 
    addStock() 
})

kaynak

2016-04-09 19:15:43 guest271314

cevap

İlgili konular