使用jquery将数据加载到服务器
使用jquery将数据加载到服务器
提问于 2014-05-13 14:45:41
我读过很多关于通过jquery向服务器加载或发布数据的文章，但是找不到适合我的数据。我在一个列表(数组)中包含了从它们获得的大量输入和数据。
我要把它装到服务器上。我想我应该这样做
客户端
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
var name = $("#name").val();
$("#stage").load('/jquery/result.php', {"name":name} );
});
});
</script>
</head>
<body>
<p>Enter your name and click on the button:</p>
<input type="input" id="name" size="40" /><br />
<div id="stage" style="background-color:blue;">
STAGE
</div>
<input type="button" id="driver" value="Show Result" />
</body>
</html>服务器端
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?> 从这里得到它，将数据传送到服务器，但在我的例子中，我需要加载一个列表(数组)，我不知道php部分必须如何在服务器端用python编写。还得提一下我用的是酒瓶。
我真的很感激你的帮助。
编辑
好吧，我快到了！
除了发生了一件奇怪的事
home.html
<script>
var dict = {}
$(document).ready(function(){
$("#save").click(function(){
var ids = []
var datas = []
$(".result").each(function() {
ids.push(this.id);
datas.push(this.value);
});
for (var i = 0; i < ids.length; i++){
dict[ids[i]] = datas[i];
}
console.log(ids);
console.log(datas)
});
});
var bla = {1:'4', 2:'5', 3:'6', 4:'7', 5:'4', 6:'5', 7:'6', 8:'7'}
console.log(dict)
$(function() {
$('a#calculate').bind('click', function() {
$.getJSON('/add_numbers', dict, function(data) {
$("#result").text(data.result);
});
return false;
});
});
</script>
<p><input type=text size=5 name=a> +
<input type=text size=5 name=b> =
<span id=result>?</span>
<p><a href=# id=calculate>calculate server side</a>
<div id="chosen">
{% for key, value in selected.iteritems() %}
{{value[0]}}<input type="text" id="{{key}}" size="5" class="result">{{value[1]}}<br>
{% endfor %}
<input type="submit" id="save" value="save">
</div>views.py
@app.route('/home', methods=['GET', 'POST'])
def show_work():
demount = DemountForm(request.form)
tile = TileForm(request.form)
chosen = []
for each in session['data']:
chosen.append(each)
selected = methods.get_selected(chosen)
return render_template('home.html', demount=demount, tile=tile, selected = selected)
@app.route('/add_numbers')
def add_numbers():
a = request.args.get('1', '0', type=str)
return jsonify(result=a)我从“带有jquery的ajax”瓶那里得到了解决方案。
但是，这里有个问题。
如果我在模板bla中使用了奇怪的变量$.getJSON('/add_numbers', bla, function(data)，那么它工作得很好。这是因为bla中的数据是全局的，它可以在getJSON中看到，并且这个函数将数据发送到/add_number，从bla添加到URL数据，比如："http://localhost:5000/add_numbers?1=4&2=5&3=6&4=7&5=4&6=5&7=6&8=7"，然后return jsonify(result=a)返回结果。
当我在dict中使用$.getJSON('/add_numbers', dict, function(data)时，问题就出现了。
在前面的函数之后，dict被形成，来自dict的dict数据被添加到当前的URL中，如下所示：http://localhost:5000/home?1=6&2=6&3=6&4=6&5=6&6=6和变量dict不再包含数据。
据我所知，这是因为，比如说，URL，每个函数都与之相关。
有人知道如何解决这个问题吗？
回答 3
Stack Overflow用户
发布于 2014-05-13 14:52:56
通常，使用ajax将数据传递给服务器，这是一个可以工作的示例。
$.ajax({
type: 'post',
url: '/jquery/result.php',
data: {"name":$('#name').val()},
success: function(data){
//maybe do something with response (data)
}
});在服务器端获取这些信息的方式如下
<?PHP $name = $_POST['name']; ?> 在此之后，您可以以任何方式使用name变量。
Stack Overflow用户
发布于 2014-05-13 21:53:04
在水瓶里，你可以做这样的事情
from flask import Flask, request
import json
import random
app = Flask(__name__)
@app.route('/')
def main():
return """<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$('#btnSend').click(function(){
var fruits = ["apple", "banana", "orange"];
$.ajax({
type: 'POST',
url: '/do_something',
data: {"fruits":JSON.stringify(fruits)},
success: function(data){
alert(data);
}
});
});
});
</script>
</head>
<body>
<input type="button" id="btnSend" value="send fruits">
</body>
</html>"""
@app.route('/do_something', methods=['POST'])
def view_do_something():
if request.method == 'POST':
fruits = json.loads(request.form.get("fruits"))
fruit = fruits[random.randint(0, len(fruits))]
return fruit
else:
return "no fruit"
if __name__ == '__main__':
app.run()运行脚本并尝试
Stack Overflow用户
发布于 2014-05-14 11:05:57
好吧，这就是我想出来的。
home.html
<script>
$(document).ready(function(){
$('#calculate').bind('click', function() {
var dict = {}
var ids = []
var datas = []
$(".result").each(function() {
ids.push(this.id);
datas.push(this.value);
});
for (var i = 0; i < ids.length; i++){
dict[ids[i]] = datas[i];
}
console.log(ids);
console.log(datas)
console.log(dict)
$.getJSON('/add_numbers', dict, function(data) {
$("#result").text(data.result);
});
return false;
});
});
</script>view.py
import methods
@app.route('/add_numbers')
def add_numbers():
ident = []
amount = []
ids = [1,2,3,4,5,6]
for each in ids:
val = request.args.get(str(each), '0', type=str)
if int(val) != 0:
ident.append(each)
amount.append(int(val))
res = methods.calc(ident, amount)
return jsonify(result=res)methods.py
def calc(ids, amount):
prices = db_session.query(Work.price).filter(Work.id.in_((ids))).all()
prices = [each[0] for each in prices]
i = 0
result = 0
while i < len(ids):
result += prices[i]*amount[i]
i += 1
return result，它起作用了！感谢大家。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23634511
复制相关文章
相似问题
腾讯云开发者
