ajax的常用写法 与 表单和按钮提交

摘要

ajax的写法不是唯一的,随着技术的进步,也有着不同的写法

一、ajax的常用写法

1.ajax常规写法

url:路由
type: 提交的类型
dataType: 数据的格式
data: 提交的数据,字典格式
success: 提交成功后的返回数据。函数中的data是必须要写的,无论有没有返回数据,如果有,返回的数据也在data中
error: 提交失败后要做的操作

$(document).ready(function(){
    $.ajax({
        url: '',
        type:'get',
        dataType: 'json',
        data: '',
        success: function(data){

                        },
        error: function(data){

}
})
})

2.ajax 其他写法

  • get方式的写法

url :路由
data:要传的数据
data: 成功后返回的数据
函数:返回后的处理方法

$.get(url, data,  function(data){
    
})
  • post写法
$.post(url, data, function(data){

})

二、js表单提交

1.图片内容提交

submit 提交 ajaxSubmit
return false 不刷新整个页面

$('#').submit(function () {
    $(this).ajaxSubmit({
        url: '',
        type: '',
        datatype: 'json',
        success: function (data) {

        },
        error: function (data) {
            alert('返回失败')
        }
    });
    return false
})

2.普通内容提交

$('#').submit(function () {
 
    $.post(url, data, function (data) {
   
        }
    })
    return false
})

三、获取js中的提交内容

1.普通内容

request.form

例:

@house.route('/newhouse/', methods=['POST'])
def user_newhouse():
 # 这是获得表单的所有内容
    house_dict = request.form
   # 这是获取表单中的列表
    facility_ids = request.form.getlist('facility') 
   # 这是获取单个表单的内容
    house.title = house_dict.get('title')

2.文件内容

request.file

例:

@house.route('/images/', methods=['POST'])
def newhouse_image():

    images = request.files.get('house_image')
    images_url = os.path.join(os.path.join('/static', 'upload'), images.filename) # iamges.filename 是文件名
    return jsonify(code=status_code.OK, image_url=images_url)

你可能感兴趣的:(ajax的常用写法 与 表单和按钮提交)